Få en Google Maps API-nøkkel for nettstedet ditt
Den beste måten å legge til et Google-kart på nettstedet ditt, er å bruke Google Maps API. Og Google anbefaler at du får en API-nøkkel for å kunne bruke kartene.
Du er ikke pålagt å få en API-nøkkel for å bruke Google Maps API v3, men det er veldig nyttig, da det lar deg overvåke bruken din og betale for ekstra tilgang. Google Maps API v3 har en kvote på 1 forespørsel per sekund per bruker til maksimalt 25.000 forespørsler per dag. Hvis sidene dine overskrider disse grensene, må du aktivere fakturering for å få mer.
Slik får du en Google Maps API-nøkkel
- Logg inn på Google ved hjelp av Google-kontoen din.
- Gå til utviklerkonsollen
- Bla gjennom listen og finn Google Maps API-versjonen v3, og klikk deretter på "OFF" -knappen for å slå den på.
- Les og godta vilkårene.
- Gå til API-konsollen og velg "API Access" fra venstre meny
- I delen "Enkel API tilgang" klikker du på "Opprett ny servernøkkel …" -knappen.
- Skriv inn IP-adressen til webserveren din. Dette er IP-adressen der dine Maps-forespørsler kommer fra. Hvis du ikke kjenner din IP-adresse, kan du se den opp.
- Kopier teksten på "API-nøkkelen:" -linjen (ikke inkludert den aktuelle tittelen). Dette er din API-nøkkel for kartene dine.
Konverter din adresse til koordinater
For å kunne bruke Google Maps på websidene dine må du ha breddegrad og lengdegrad for stedet. Du kan få disse fra en GPS, eller du kan bruke et elektronisk verktøy som Geocoder.us for å fortelle deg.
- Gå til Geocoder.us og skriv inn adressen din i søkeboksen.
- Kopier det første nummeret for breddegrad (uten et brev foran) og lim det inn i en tekstfil. Du trenger ikke graden (º) indikatoren.
- Kopier det første tallet for lengdegraden (igjen uten et brev foran) og lim det inn i tekstfilen din.
Din breddegrad og lengdegrad vil se slik ut:
40.756076-73.990838
Geocoder.us fungerer bare for amerikanske adresser, hvis du trenger å få koordinatene i et annet land, bør du søke etter et lignende verktøy i din region.
03 av 05Legge til kartet til websiden din
Først legger du til kartskriptet til
av dokumentet ditt
Åpne nettsiden din og legg til følgende i HODE av dokumentet ditt.
Endre den uthevede delen til bredde- og lengdegradstallene du skrev ned i trinn to.
For det andre, legg kartelementet til din side
Når du har alle skriptelementene lagt til i HODE av dokumentet ditt, må du plassere kartet på siden. Du gjør dette ved å legge til en DIV element med id = "map-lerret" Egenskap. Jeg anbefaler at du også stiler denne diven med bredden og høyden som passer på siden din:
Til slutt, Last opp og test
Det siste du må gjøre er å laste opp siden din og teste at kartet ditt vises. Her er et eksempel på et Google-kart på siden. Merk, på grunn av hvordan CMS fungerer, må du klikke på en kobling for å få kartet til å vises. Dette vil ikke være tilfelle på siden din.
Hvis kartet ikke vises, kan du prøve å initialisere det med en KROPP Egenskap:
onload- = "initialize ()" >
Andre ting å sjekke om kartet ikke lastes inn inkluderer:
- Se etter typoer i JavaScript, inkludert tilfelle. JavaScript er saksfølsomt.
- Pass på at du har
zoomogsenteralternativ sett. - Pass på at din
DIVelementet er på siden med riktig ID. - Pass på at din
DIVelementet har en høyde
Legg til en markør på kartet ditt
Men hvor bra er et kart over din plassering hvis det ikke er noen markør som forteller folk hvor de skal gå?
For å legge til en standard Google Maps-rød markør legger du til følgende i skriptet under var map = … linje:
var myLatlng = nye google.maps.LatLng ( breddegrad lengdegrad );var markør = ny google.maps.Marker ({posisjon: myLatlng,kart: kart,tittel:" Tidligere hovedkontor '});
Endre den merkede teksten til breddegrad og lengdegrad og tittelen du vil se når folk svinger over markøren.
Du kan legge til så mange markører på siden som du vil, bare legg til nye variabler med nye koordinater og titler, men hvis kartet er for lite til å vise alle markørene, vil de ikke vises med mindre leseren zoomer ut.
var latlng 2 = nye google.maps.LatLng ( 37.3316591,-122.0301778 );var minMarker 2 = new google.maps.Marker ({stilling: latlng 2 ,kart: kart,tittel:" Apple Computer '});
Her er et eksempel på et Google-kart med en markør. Merk, på grunn av hvordan CMS fungerer, må du klikke på en kobling for å få kartet til å vises. Dette vil ikke være tilfelle på siden din.
05 av 05Legg til et sekund (eller mer) kart til din side
Hvis du har sett på min Google Maps-side, viser du at jeg har mer enn ett kart som vises på siden. Dette er veldig enkelt å gjøre. Dette er hvordan.
- Få bredde og lengdegrad for alle kartene du vil vise som vi lærte i trinn 2 i denne opplæringen.
- Sett inn det første kartet som vi lærte i trinn 3 i denne opplæringen. Hvis du vil at kartet skal ha en markør, legg til markøren som i trinn 4.
- For det andre kartet må du legge til 3 nye linjer i ditt initialiseringsskript:
var latlng2 = nytt google.maps.LatLng ( andre koordinater );var myOptions2 = {zoom: 18, senter: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = nytt google.mapsMap (document.getElementById ("map_canvas_2"), minOptions2); - Hvis du også vil ha en markør på det nye kartet, legger du til en andre markør som peker på andre koordinater og det andre kartet:
var myMarker2 = ny google.maps.Marker ({posisjon: latlng2 , kart: Map2 , tittel: " Markørens tittel ' }); - Legg deretter til det andre stedet du vil ha det andre kartet. Og vær sikker på å gi den en
id = "map_canvas_2"ID. - Når siden lastes, vises to kart
Her er koden til en side med to Google Maps på den:
