Hva du skal vite
- Gå til Google Cloud Platform Console og opprett eller velg et prosjekt, og klikk deretter Fortsette. På Legitimasjonserklæring side, få en API-nøkkel.
- Sett inn JavaScript-koden (vist nedenfor) i BODY-delen av HTML-dokumentet.
- Angi CSS-begrensninger for kartet i hodet på HTML-dokumentet, inkludert størrelse, farger og sideplassering.
Denne artikkelen forklarer hvordan du setter inn et Google-kart med en stedsmarkør på websiden din. Denne prosessen inkluderer å få en spesiell programvarenøkkel fra Google og deretter legge til relevant JavaScript på siden.
Få en Google Maps API-nøkkel
For å beskytte serverne sine mot å bli bombardert av forespørsler om kart og lokalitetsoppslag, sperrer Google tilgang til Maps-databasen. Du må registrere deg hos Google som utvikler for å få en unik nøkkel for å bruke applikasjonsprogrammeringsgrensesnittet til å be om data fra Maps-serverne. API-nøkkelen er gratis med mindre du trenger tung tilgang til Googles servere (for eksempel for å utvikle en webapp).
Slik registrerer du API-nøkkelen:
Gå til Google Cloud Platform Console og etter å ha logget på med Google-kontoen din, kan du enten opprette et nytt prosjekt eller velge et eksisterende.
Klikk Fortsette for å aktivere API og eventuelle relaterte tjenester.
På Legitimasjonserklæring side, få en API-nøkkel. Sett om nødvendig relevante begrensninger på nøkkelen.
Sikre API-nøkkelen din ved hjelp av beste praksis anbefalt av Google.
Hvis du mener at du må ha kartet vist oftere enn den gratis kvoten din tillater, kan du sette opp en faktureringsordning med Google. Det er lite sannsynlig at de fleste nettsteder, spesielt blogger eller nisjesider med lite trafikk, bruker mye av kvotetildelingen.
Sett inn JavaScript på websiden din
Sett inn følgende kode på websiden din, i BODY-delen av HTML-dokumentet:
// Initialiser og legg til kartfunksjonen initMap () {
// Plasseringen av flagget var flagg = {lat: XXX, lng: ÅÅÅ};
// Kartet, sentrert ved flagg var kart = nye google.maps. Map (document.getElementById ('map'), {zoom: 4, center: flag});
// Markøren, plassert ved flagget var marker = new google.maps. Markør ({posisjon: flagg, kart: kart}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">
I denne koden endrer du følgende:
- Erstatte flagg med et navn som refererer til stedet du fester. Hold det enkelt og kort (som hjem eller kontor eller paris eller detroit). Du kan kjøre denne koden igjen flagg som det er, men å endre navnet støtter gjenbruk av denne koden på samme side, for å legge inn flere forskjellige kart.
- Erstatte XXX og ÅÅÅ med breddegrad og lengdegrad, i desimaler, til plasseringen av kartmarkøren. Du må erstatte disse verdiene for at kartet skal vises riktig. En enkel måte å finne breddegrad og lengdegrad er å åpne Google Maps og høyreklikke på den nøyaktige plasseringen du har tenkt å markere. I hurtigmenyen velger du Hva er her? for å vise breddegrad og lengdegrad.
- Erstatte DIN_API_KEY med API-nøkkelen du fikk fra Google. Ikke plasser mellomrom mellom liketegnet og bokstavet. Uten nøkkelen mislykkes spørringen, og kartet vises ikke riktig.
Optimal praksis
I hodet til HTML-dokumentet, spesifiser CSS-begrensninger for kartet, inkludert størrelse, farger og sideplassering.
Googles kartskript inneholder attributter som zoom og senter som er åpne for endring av brukerne. Denne mer avanserte teknikken støttes gjennom Googles utviklerdokumentasjon.
Et Google Maps API er en verdifull ressurs. Googles beste praksisinstruksjoner gir gode råd for å sikre nøkkelen mot misbruk av andre. Riktig sikkerhet er spesielt relevant hvis du har satt opp et betalingssystem for API-tilgang, da du kan møte en bratt regning hvis legitimasjonen din blir stjålet. Spesielt eksemplet vi har vist her gjør legge inn API-nøkkelen direkte i koden - vi har gjort dette for å demonstrere prosedyren. I et produksjonsmiljø er det imidlertid bedre å spesifisere miljøvariabler for nøkkelen i stedet for å sette inn nøkkelen direkte.