Sådan tilføjes et Google-kort til en webside med API

Denne artikel forklarer, hvordan du indsætter et Google-kort med en placeringsmarkør på din webside. Denne proces inkluderer at hente en særlig softwarenøgle fra Google og derefter tilføje det relevante JavaScript til siden.

Få en Google Maps API-nøgle

For at beskytte sine servere mod at blive bombarderet af anmodninger om kort og lokalitetsopslag, begrænser Google adgang til sin Maps-database. Du skal registrere dig hos Google som udvikler for at få en unik nøgle til at bruge applikationsprogrammeringsgrænsefladen til at anmode om data fra Maps-serverne. API-nøglen er gratis, medmindre du har brug for tung adgang til Googles servere (for eksempel for at udvikle en webapp).

Sådan registreres din API-nøgle:

1. Gå til Google Cloud Platform-konsol og efter at du er logget ind med din Google-konto, skal du enten oprette et nyt projekt eller vælge et eksisterende.

2. Klik på Blive ved for at aktivere API og eventuelle relaterede tjenester.

3. På den Legitimationsoplysninger side, få en API-nøgle. Indstil efter behov relevante begrænsninger for nøglen.

4. Sikr din API-nøgle ved hjælp af bedste praksis anbefalet af Google.

Indsæt JavaScript på din webside

Indsæt følgende kode på din webside i BODY-sektionen i HTML-dokumentet:

// Initialiser og tilføj kortfunktionen initMap () {
// Placeringen af ​​flag var flag = {lat: XXX, lng: YYY};
// Kortet, centreret ved flag var map = new google.maps. Map (document.getElementById ('map'), {zoom: 4, center: flag});
// Markøren, placeret ved flag var markør = ny google.maps. Markør ({position: flag, kort: kort}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">

I denne kode skal du ændre følgende:

• Erstatte flag med et navn, der refererer til den placering, du fastgør. Hold det enkelt og kort (ligesom hjem eller kontor eller Paris eller detroit). Du kan køre denne kode og forlade flag som det er, men ændring af navnet understøtter genbrug af denne kode på samme side for at integrere flere forskellige kort.
• Erstatte XXX og ÅÅÅ med breddegrad og længdegrad i decimaler for placeringen af ​​kortets markør. Du skal erstatte disse værdier for at kortet kan vises korrekt. En nem måde at finde breddegrad og længdegrad er at åbne Google Maps og højreklikke på den nøjagtige placering, du har til hensigt at markere. I kontekstmenuen skal du vælge Hvad er her? for at se breddegrad og længdegrad.
• Erstatte DIN_API_KEY med den API-nøgle, du har fået fra Google. Anbring ikke mellemrum mellem ligetegnet og ampersand. Uden nøglen mislykkes forespørgslen, og kortet vises ikke korrekt.

Optimal praksis

Angiv CSS-begrænsninger for kortet i hovedet af dit HTML-dokument, herunder størrelse, farver og sideplacering.

Googles kortscript indeholder attributter som f.eks zoom og centrum der er åbne for ændring af slutbrugeren. Denne mere avancerede teknik understøttes gennem Googles udviklerdokumentation.

En Google Maps API er et værdifuldt aktiv. Googles instruktioner om bedste praksis giver fremragende råd til at sikre nøglen mod misbrug af andre. Korrekt sikkerhed er især relevant, hvis du har oprettet et betalingssystem til API-adgang, da du kan stå over for en stejl regning, hvis dine legitimationsoplysninger bliver stjålet. Især det eksempel, vi har vist her gør integrere API-nøglen direkte i koden - vi har gjort dette med det formål at demonstrere proceduren. I et produktionsmiljø er det dog bedre at specificere miljøvariabler for nøglen i stedet for at indsætte nøglen direkte.