Vad du ska veta
- Gå till Google Cloud Platform Console och skapa eller välj ett projekt och klicka sedan på Fortsätta. På Referenser sida, få en API-nyckel.
- Infoga JavaScript-koden (visas nedan) i avsnittet BODY i HTML-dokumentet.
- I HTML-dokumentets huvud anger du CSS-begränsningar för kartan, inklusive storlek, färger och sidplacering.
Den här artikeln förklarar hur du sätter in en Google-karta med en platsmarkör på din webbsida. Denna process inkluderar att få en speciell programvarunyckel från Google och sedan lägga till relevant JavaScript på sidan.
Skaffa en Google Maps API-nyckel
För att skydda sina servrar från att bombas av förfrågningar om kartor och platsuppsökningar stryper Google åtkomst till sin Maps-databas. Du måste registrera dig hos Google som utvecklare för att få en unik nyckel för att använda applikationsprogrammeringsgränssnittet för att begära data från Maps-servrarna. API-nyckeln är gratis såvida du inte behöver tung tillgång till Googles servrar (till exempel för att utveckla en webbapp).
Så här registrerar du din API-nyckel:
Gå till Google Cloud Platform Console och efter att du loggat in med ditt Google-konto, antingen skapa ett nytt projekt eller välj ett befintligt.
Klick Fortsätta för att aktivera API och alla relaterade tjänster.
På Referenser sida, få en API-nyckel. Ange vid behov relevanta begränsningar för nyckeln.
Säkra din API-nyckel med bästa praxis rekommenderas av Google.
Om du tror att du måste visa kartan oftare än din kostnadsfria kvot tillåter kan du skapa ett faktureringsarrangemang med Google. De flesta webbplatser, särskilt bloggar med låg trafik eller nischplatser, kommer troligen inte att konsumera mycket av kvotfördelningen.
Infoga JavaScript på din webbsida
Sätt in följande kod på din webbsida i avsnittet BODY i HTML-dokumentet:
// Initiera och lägg till kartfunktionen initMap () {
// Platsen för flaggan var flagga = {lat: XXX, lng: YYY};
// Kartan, centrerad vid flaggan var map = ny google.maps. Karta (document.getElementById ('karta'), {zoom: 4, mitt: flagga});
// Markören, placerad vid flaggan var marker = new google.maps. Markör ({position: flagga, karta: karta}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">
Ändra följande i den här koden:
- Byta ut flagga med ett namn som refererar till platsen du fäster. Håll det enkelt och kort (som Hem eller kontor eller paris eller detroit). Du kan köra den här koden och lämna flagga som det är, men att ändra namnet stöder återanvändning av den här koden på samma sida för att bädda in flera olika kartor.
- Byta ut XXX och ÅÅÅ med latitud och longitud, i decimaler, för platsen för kartans markör. Du måste ersätta dessa värden för att kartan ska kunna visas korrekt. Ett enkelt sätt att hitta latitud och longitud är att öppna Google Maps och högerklicka på den exakta platsen du tänker flagga. Välj i snabbmenyn Vad är här? för att se latitud och longitud.
- Byta ut DIN_API_KEY med API-nyckeln du fick från Google. Lägg inte mellanrum mellan likhetstecknet och bokstaven. Utan nyckeln misslyckas frågan och kartan visas inte korrekt.
Optimala metoder
Ange CSS-begränsningar för kartan i huvudet på ditt HTML-dokument, inklusive storlek, färger och sidplacering.
Googles kartskript innehåller attribut som zoom och Centrum som är öppna för ändringar av slutanvändare. Denna mer avancerade teknik stöds av Googles utvecklardokumentation.
Ett Google Maps API är en värdefull tillgång. Googles instruktioner för bästa praxis ger utmärkta råd för att säkra nyckeln mot missbruk av andra. Korrekt säkerhet är särskilt relevant om du har skapat ett betalningssystem för API-åtkomst, eftersom du kan möta en brant faktura om dina referenser blir stulna. I synnerhet exemplet vi har visat här gör bädda in API-nyckeln direkt i koden - vi har gjort detta för att demonstrera proceduren. I en produktionsmiljö är det dock bättre att ange miljövariabler för nyckeln istället för att infoga nyckeln direkt.