Slik bruker du Google Maps API-skjermbildet

Så klienten din sender deg e-post og spør, "Kan du sette et av disse prangende kartene på min kontaktside slik at brukerne faktisk kan se vår bygning fra en satellitts utsikt?". Du har brukt Google Maps mange ganger, men det er bare ett problem: du har ingen anelse om hvordan du bruker APIen. Nå kom du ut skjeen og grave inn!

* Klikk på fullskjermvekselen.

Trinn 1: Hent en unik API-nøkkel

Hvis du skulle laste ned kildekoden som følger med denne artikkelen, vil du oppdage at den ikke fungerer på nettstedet ditt. Årsaken er at Google krever at alle brukere får en unik "API-nøkkel" for hvert nettsted som implementerer Google Maps.

Aldri frykt. Det er 100% gratis og tar omtrent tretti sekunder å registrere seg. Gå først til Googles registreringsside og skriv inn nettadressen til nettstedet ditt. Ikke bekymre deg for å legge til en bestemt bane. Roten url vil dekke alle sider som er en del av det domenet. Godta vilkårene og klikk "Generer API".

Det er det! Siden du har blitt omdirigert til, inneholder din unike nøkkel, samt en eksempelside - for å fungere som et kollaps. Nøkkelen din vil se ut som:

ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv

Du finner også en skriptbane som vil se ut som:

Din vil være forskjellig fra meg fordi den vil inneholde din egen spesifikke nøkkelverdi. Kopier dette og lim det inn i hoveddelen av dokumentet.

Du vil kanskje bokmerke linken til API-dokumentasjonen. Du vil utvilsomt referere til det når dine ferdigheter utvikler seg.

Trinn 2: Sette opp HTML-en din

For enkelhets skyld skal vi opprette et nakent beinlayout. Legg til følgende i kroppsdelen av dokumentet.

I en ekte verdenssituasjon bør du flytte stylingen til en ekstern fil (som jeg gjorde i videoen). Høyde- og breddeverdiene vil ved hjelp av API for å bestemme dimensjonene på kartet ditt. Ikke bekymre deg, ingenting blir klippet av.

Trinn 3: Javascript

Deretter legger du til følgende i Javascript-filen din. Se gjennom det litt, og fortsett videre.

 $ (funksjon () // når dokumentet er klar til å bli manipulert. Hvis (GBrowserIsCompatible ()) // hvis nettleseren er kompatibel med Google Map var kart = document.getElementById ("myMap"); // Få div element var m = ny GMap2 (kart); // ny forekomst av GMap2-klassen og passere i vår div-posisjon. m.setCenter (ny GLATLng (36.158887, -86.782056), 13); // passere i breddegrad, lengdegrad og zoom nivå. else alert ("Din nettleser er ikke verdig."););

For å ta denne koden linje etter linje:

• Når dokumentet er klar til å bli manipulert, kjør koden innenfor. Dette er en jQuery-syntaks, men jQuery er ikke nødvendig i det minste. Du kan også bare legge til et "onLoad ()" attributt til kroppselementet ditt - selv om dette er rotete.
• Hvis nettleseren som brukeren får tilgang til kartet fra, ikke er kompatibel med API-en, så vis et varsel (se nederst). Ellers kjører du koden innen.
• Opprett en variabel kalt "kart" og fortell det å finne div som vil inneholde kartet.
• Deretter lager du en variabel som heter "m" og gjør den til en ny forekomst av klassen "GMap2". Innen parentesen, pass i "kart" -variabelen som du nettopp har opprettet tidligere
• Sett endelig et senterpunkt slik at kartet vet hva du skal vise. For å gjøre dette, oppretter vi en ny forekomst av "GLatLng" -kursen og passerer i breddegrad og lengdegradverdiene. Du kan gå her for å hente de riktige verdiene. I mitt tilfelle har jeg satt koordinatene til min hjemby. Etter det kan du eventuelt legge inn et zoomnivå - som jeg har satt til standarden '13'.

Denne koden alene vil gi deg et grunnleggende kart som kan være helt passende for dine behov. Men hvis du også vil implementere "zoom" og "kartmodus" -funksjonene, les videre.

Trinn 4: Raffinere vårt kart

Det er bokstavelig talt dusinvis av funksjoner som du kan legge til på kartet. Vi går over noen av dem. Først skal vi implementere en zoomlinje som gjør at brukerne gradvis kan zoome inn eller ut.

 m.addControl (ny GLargeMapControl ())

Her tar vi kartet vårt og legger til en ny kontroll kalt "GLargeMapControl".

Deretter la vi legge til en funksjon som lar brukerne velge hvilken kartmodus de ønsker - Normal, Satellittvisning eller en hybrid.

 var c = ny GMapTypeControl (); // bytte kartmodus m.addControl (c);

• Opprett en variabel kalt "c" og gjør den til en ny forekomst av klassen "GMapTypeControl".
• Legg til en ny kontroll, og send inn "c".

Hvis du oppdaterer nettleseren din, ser du at brukerne nows har muligheten til å velge visningsmodus. Men hva om du vil angi standardmodus? I slike tilfeller vil du bruke "setMapType".

 m.setMapType (G_SATELLITE_MAP);

Når du definerer standardmodus, har du tre valg.

• G_SATELLITE_MAP
• G_NORMAL_MAP
• G_HYBRID_MAP

Du er ferdig!

Det var ikke for vanskelig, var det? Det er noen spesifikke klassenavn som du trenger å huske, eller skrive ned for senere referanse. Men bortsett fra det, er det utrolig enkelt å implementere et slikt avansert kart i nettstedene dine.

For deg maldesignere, hvorfor ikke implementere dette i et av temaene du selger på ThemeForest?

For noen dager siden la vi opp en veiledning som viser deg hvordan du kan kombinere mange APIer - inkludert Google Maps. Men mange av dere visste ikke nok for å komme i gang. Forhåpentligvis vil dette hjelpe. Etter at du har pakket hodet rundt denne APIen, hvorfor ikke redd deg selv for noen hodepine og få hjelp av en PHP-klasse kalt Phoogle? Jeg synes det er best å lære den riktige måten først, men nå har du ... klippe noen hjørner! Ser deg neste uke.

Ekstra ressurs

• 

  Slik lager du en Mashup ved å kombinere 3 forskjellige APIer

  Denne opplæringen viser deg hvordan du lager en mashup av tre forskjellige APIer, inkludert integrering med Google Maps.

  Besøk artikkelen

• Abonner på RSS-feedet og Video Feed for flere daglige webutviklingsverktøy og artikler.