Få en Google Maps API-nyckel för din webbplats
Det bästa sättet att lägga till en Google-karta på din webbplats är att använda Google Maps API. Och Google rekommenderar att du får en API-nyckel för att kunna använda kartorna.
Du behöver inte få en API-nyckel för att använda Google Maps API v3, men det är mycket användbart eftersom det låter dig övervaka din användning och betala för ytterligare åtkomst. Google Maps API v3 har en kvot på 1 förfrågan per sekund per användare till högst 25.000 förfrågningar per dag. Om dina sidor överstiger dessa gränser måste du aktivera fakturering för att få mer.
Så här får du en API-nyckel för Google Maps
- Logga in på Google med ditt Google-konto.
- Gå till utvecklarens konsol
- Bläddra igenom listan och hitta Google Maps API v3 och klicka sedan på "OFF" knappen för att slå på den.
- Läs och godkänn villkoren.
- Gå till API-konsolen och välj "API-åtkomst" från menyn till vänster
- Klicka på knappen "Skapa ny servernyckel …" i avsnittet "Enkel API-åtkomst".
- Ange din webbservers IP-adress. Detta är den IP där dina Maps-förfrågningar kommer från. Om du inte känner till din IP-adress kan du kolla upp det.
- Kopiera texten på "API-nyckel:" -raden (inte den här titeln). Detta är din API-nyckel för dina kartor.
Konvertera din adress till koordinater
För att kunna använda Google Maps på dina webbsidor måste du ha latitud och longitud för platsen. Du kan få dessa från en GPS eller du kan använda ett onlineverktyg som Geocoder.us för att berätta.
- Gå till Geocoder.us och skriv in din adress i sökrutan.
- Kopiera det första numret för latitud (utan ett brev framför) och klistra in det i en textfil. Du behöver inte graden (º) -indikatorn.
- Kopiera det första numret för longituden (igen utan ett brev framför) och klistra in det i din textfil.
Din latitud och longitud kommer att se något ut så här:
40.756076-73.990838
Geocoder.us fungerar bara för amerikanska adresser, om du behöver hämta koordinaterna i ett annat land ska du söka efter ett liknande verktyg i din region.
03 av 05Lägga till kartan till din webbsida
Lägg först till kartskriptet till
av ditt dokument
Öppna din webbsida och lägg till följande till HUVUD av ditt dokument.
Ändra den markerade delen till latitud- och longitudnummer som du skrev ner i steg två.
För det andra, lägg till kartelementet på din sida
När du har alla skriptelementen tillagt HUVUD av ditt dokument måste du placera din karta på sidan. Du gör det genom att lägga till en DIV element med id = "map-duk" attribut. Jag rekommenderar att du också stile denna div med bredd och höjd som passar på din sida:
Slutligen, ladda upp och testa
Det sista du behöver göra är att ladda upp din sida och testa vilken karta du visar. Här är ett exempel på en Google-karta på sidan. Obs! På grund av hur CMS fungerar, måste du klicka på en länk för att få kartan att visas. Detta kommer inte att vara fallet på din sida.
Om din karta inte dyker upp, försök att initiera den med en KROPP attribut:
onload = "initiera ()" >
Andra saker att kontrollera om din karta inte laddas är:
- Leta efter typsnitt i ditt JavaScript, inklusive fall. JavaScript är skiftlägeskänsligt.
- Se till att du har
zoomochCentruminställda alternativ. - Se till att din
DIVElementet finns på sidan med rätt ID. - Se till att din
DIVelementet har en höjd
Lägg till en markör på din karta
Men vad bra är en karta över din plats om det inte finns någon markör där folk ska gå?
Lägg till en standard Google Maps-röd markör lägga till följande i ditt skript under var map = … linje:
var myLatlng = nya google.maps.LatLng ( Latitud longitud );var markör = ny google.maps.Marker ({position: myLatlng,karta: karta,titel:" Tidigare huvudkontor i '});
Ändra den markerade texten till din latitud och longitud och den titel du vill se när människor svävar över markören.
Du kan lägga till så många markörer på sidan som du vill, bara lägga till nya variabler med nya koordinater och titlar, men om kartan är för liten för att visa alla markörer visas de inte om inte läsaren zoomar ut.
var latlng 2 = nya google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = nya google.maps.Marker ({position: latlng 2 ,karta: karta,titel:" Apple dator '});
Här är ett exempel på en Google-karta med en markör. Observera, på grund av hur CMS fungerar, måste du klicka på en länk för att få kartan att visas. Detta kommer inte att vara fallet på din sida.
05 av 05Lägg till en andra (eller mer) karta till din sida
Om du har tittat på mitt exempel på Google Maps-sida kommer du märka att jag har mer än en karta som visas på sidan. Det här är väldigt lätt att göra. Här är hur.
- Få latitud och longitud för alla kartor du vill visa som vi lärde oss i steg 2 i denna handledning.
- Sätt in den första kartan som vi lärde oss i steg 3 i denna handledning. Om du vill att kartan ska ha en markör, lägg till markören som i steg 4.
- För den andra kartan måste du lägga till 3 nya rader till ditt initiera () -skript:
var latlng2 = nya google.maps.LatLng ( andra koordinater );var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = nya google.mapsMap (document.getElementById ("map_canvas_2"), myOptions2); - Om du också vill ha en markör på den nya kartan lägger du till en andra markör som pekar på andra koordinaterna och den andra kartan:
var myMarker2 = nya google.maps.Marker ({position: latlng2 , Karta: MAP2 , titel: " Din markörstitel ' }); - Lägg sedan till den andra där du vill ha den andra kartan. Och var noga med att ge den en
id = "map_canvas_2"ID. - När din sida laddas visas två kartor
Här är koden på en sida med två Google Maps på den:
