Kan jeg laste To Google Maps i API Keys?

Hvis du bruker Google prøveJavaScript-kode og Google Maps API-nøkkel for å plassere et kart på en webside, vet du at eksempelkoden skaper et enkelt kart. Dette er greit når du bare har ett sted å vise, men det kan være lurt å vise besøkende en ekstra visning. Du kan gjøre det ved å gjøre noen raske endringer i HTML-koden som genererer Google kartet.

Legge til ett kart

Det tar ikke mye kode for å plassere et Google-kart på en webside. Komplekset koding nødvendig for å generere et kart eksisterer i den eksterne Javascript som du kobler til fra koden som vist nedenfor:

src = "http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">

Når du har opprettet en ny Javascript-objekt, kan du fylle den med noen egenskaper som zoom som tilpasser kartet. Generer kartet ved å kalle MAP funksjon som vist i dette eksemplet:

Var map1 = ny google.maps.Map (document.getElementById ( "div1"),

Denne koden oppretter en variabel kalt map1 og sender den ID-div som viser kartet.

Legge To Maps

Legg et andre kart ved å klone noen av koden som brukes til å lage det første kartet. Anta at Javascript objekt dukket opp som vist nedenfor:

Var mapObject = {
MapTypeId: google.maps.MapTypeId.TERRAIN,
senter: Lat_Long,
zoom: 9,
};

Dette objektet oppkalt mapObject inneholder egenskaper som definerer typen kart du ønsker å vise, koordinatene til det stedet du ønsker å fremstå og kartets zoomnivå. Hvis du kopierer koden og lim den inn i dokumentet, kan du endre den kopierte objektets navn til mapObject2. Gjør den andre kartet vises ved kloning uttalelsen som kaller Map-funksjonen og endre navnet på den kopierte objektet fra map1 til map2. Du må også endre getElementById argument fra div1 til navnet på div som viser andre kartet.

Style Sheet Modifikasjoner:

Du trenger ikke komplisert Cascading Style Sheet koden for å plassere en Google kart websiden. Du kan definere en enkel klasse som definerer bredde og høyde egenskapene dine div-elementer som vist nedenfor:

.mapStyle1 {height: 100px; width: 200px; }

Denne koden skaper en klasse som heter mapStyle1 som begge divs kan referere til. Hver div høyde og bredde skal være 100 piksler og 200 piksler. Økende disse verdiene gjør kartene dine større. Hvis du gjør dem for stor, må brukerne bla for å vise kartene.

betraktninger

Hvis du vil at andre kartet til å ha en annen størrelse, kan du opprette en annen klasse som inneholder forskjellige høyde og bredde verdier og tilordne den til andre div. Lag en interessant dual-view-effekten ved å gjøre en stor kart som viser plassering og plassere en mye mindre kart ved siden av den som viser en nærmere oversikt over samme sted. Du kan selv ha ett kart viser et satellittbilde og den andre skjermen utsikt over terrenget. Legg til så mange Google maps som du liker til en side ved hjelp av disse koding teknikker.