Så här använder du Google Maps API-skärmdump

Så skickar din klient dig och frågar, "Kan du sätta en av de prickiga kartorna på min kontaktsida så att användarna faktiskt kan se vår byggnad från en satellits syn?". Du har använt Google Maps många gånger, men det finns bara ett problem: du har ingen aning om hur du använder API: n. Tja ut din sked och gräva i!

* Klicka på helskärmsväxeln.

Steg 1: Hämta en unik API-nyckel

Om du skulle ladda ner källkoden som tillhandahålls med den här artikeln skulle du upptäcka att den inte fungerar på din webbplats. Anledningen är att Google kräver att alla användare får en unik "API-nyckel" för varje webbplats som implementerar Google Maps.

Var aldrig rädd för. Det är 100% gratis och tar ungefär trettio sekunder att registrera sig. Gå först till Googles registreringssida och ange webbadressen till din webbplats. Oroa dig inte om att lägga till en viss sökväg. Rotsadressen täcker varje sida som ingår i den domänen. Godkänn villkoren och klicka på "Generera API".

Det är allt! Sidan som du har omdirigerats till innehåller din unika nyckel samt en provsida - för att fungera som en kraschbana. Din nyckel kommer att se ut som:

ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv

Du hittar också en manusväg som kommer att se ut:

Din vilja kommer att skilja sig från min eftersom det kommer att innehålla ditt eget specifika nyckelvärde. Kopiera det här och klistra in det i huvuddelen av ditt dokument.

Du kanske vill bokmärk länken till API-dokumentationen. Du kommer utan tvekan att referera till det när dina färdigheter utvecklas.

Steg 2: Ställa in din HTML

För enkelhetens skull skapar vi en heltäckande benlayout. Lägg till följande i kroppsdelen av ditt dokument.

I en verklig världssituation borde du flytta stylingen till en extern fil (som jag gjorde i videon). Höjd- och breddvärdena kommer att användas av API för att bestämma dimensionerna på din karta. Oroa dig inte, ingenting kommer att klippas av.

Steg 3: Javascript

Lägg sedan till följande i din Javascript-fil. Granska det lite och fortsätt sedan.

 $ (funktion () // när dokumentet är redo att manipuleras. om (GBrowserIsCompatible ()) // om webbläsaren är kompatibel med Google Map var map = document.getElementById ("myMap"); // Få div element var m = ny GMap2 (karta); // ny instans av GMap2 klassen och passera i vår div plats. m.setCenter (ny GLATLng (36.158887, -86.782056), 13); // passera i latitud, longitud och zoomnivå. else alert ("Din webbläsare är inte värdig."););

Att ta denna kodlinje för rad:

• När dokumentet är redo att manipuleras, kör koden innan. Det här är en jQuery-syntax, men jQuery är inte minst nödvändig. Du kan också helt enkelt lägga till ett "onLoad ()" -attribut till ditt kroppselement - fast det här är rörigt.
• Om webbläsaren som användaren åtkomst till kartan från inte är kompatibel med API: n, visar sedan en varning (se nedre). Annars kör koden inom.
• Skapa en variabel som heter "karta" och berätta för att hitta div som innehåller kartan.
• Skapa sedan en variabel som heter "m" och gör den lika med en ny instans av klassen "GMap2". Inom parentesen, passera i "karta" -variabeln som du just skapade tidigare
• Slutligen sätta en mittpunkt så att kartan vet vad som ska visas. För att göra detta skapar vi en ny instans av klassen "GLatLng" och passerar i latitud- och longitudvärdena. Du kan gå hit för att ta tag i lämpliga värden. I mitt fall har jag satt koordinaterna till min hemstad. Därefter kan du valfritt mata in en zoomnivå - som jag har satt till standarden '13'.

Den här koden ensam ger dig en grundläggande karta som kan vara helt lämplig för dina behov. Om du också vill implementera funktionerna "zoom" och "map mode", läs vidare.

Steg 4: Raffinera vår karta

Det finns bokstavligen tiotals funktioner som du kan lägga till på din karta. Vi går över några av dem. Först genomför vi en zoomfält som tillåter att användarna gradvis zoomar in eller ut.

 m.addControl (nya GLargeMapControl ())

Här tar vi vår karta och lägger till en ny kontroll som heter "GLargeMapControl".

Låt oss sedan lägga till en funktion som gör det möjligt för användarna att välja vilket kartläge de vill ha - Normal, Satellitvisning eller en hybrid.

 var c = ny GMapTypeControl (); // byta kartlägen m.addControl (c);

• Skapa en variabel som heter "c" och gör den lika med en ny instans av klassen "GMapTypeControl".
• Lägg till en ny kontroll och passera i "c".

Om du uppdaterar webbläsaren ser du att användarnöden har möjlighet att välja sitt visningsläge. Men vad händer om du vill ställa in standardläget? I sådana fall skulle du använda "setMapType".

 m.setMapType (G_SATELLITE_MAP);

När du har definierat standardläget har du tre val.

• G_SATELLITE_MAP
• G_NORMAL_MAP
• G_HYBRID_MAP

Du är klar!

Det var inte för svårt, var det? Det finns några specifika klassnamn som du behöver memorera, eller notera för senare referens. Men förutom det är det påfallande enkelt att implementera en sådan avancerad karta i dina webbplatser.

För dig mallkonstruktörer, varför inte implementera det här till en av de teman som du säljer på ThemeForest?

För några dagar sedan lade vi upp en handledning som visar hur du kan kombinera många API: er, inklusive Google Maps. Men många av er visste inte tillräckligt för att komma igång. Förhoppningsvis kommer det att hjälpa till. När du har lindat ditt huvud runt detta API, varför spara inte lite huvudvärk och få hjälp av en PHP-klass som heter Phoogle? Jag tycker att det är bäst att lära sig rätt sätt först, men nu har du ... klippa några hörn! Vi ses nästa vecka.

Ytterligare resurs

• 

  Så här skapar du en Mashup genom att kombinera 3 olika API: er

  Denna handledning visar hur du skapar en mashup av tre olika API: er, inklusive integration med Google Maps.

  Besök artikeln

• Prenumerera på RSS-flödet och videofödet för fler dagliga webbutvecklingsverktyg och artiklar.