För att infoga en Google-karta med en platsmarkör på din webbsida måste du skaffa en speciell programvarunyckel från Google och sedan lägga till relevant JavaScript på sidan. Även om processen är enkel hjälper det att ha åtminstone kortfattad bakgrundskunskap om HTML och JavaScript.
Skaffa en Google Maps API-nyckel
För att skydda sina servrar från att bombas av förfrågningar om kartor och platsuppsök, stryker Google åtkomst till sin kartdatabas. 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 ha loggat in med ditt Google-konto, antingen skapa ett nytt projekt eller välj ett befintligt.
-
Klicka Fortsätta för att aktivera API och alla relaterade tjänster.
-
På referenser sida, få en API-nyckel. Ställ vid behov in begränsningar för nyckeln.
-
Säkra din API-nyckel med bästa metoder som rekommenderas av Google.
Om du tror att du måste visa kartan oftare än vad 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 sannolikt inte att konsumera mycket av kvotfördelningen.
Infoga JavaScript på din webbsida
Infoga följande kod på din webbsida i avsnittet BODY i HTML-dokumentet:
<div id = "map"> </div>
<Script>
// Initiera och lägg till kartan
funktion initMap () {
// Platsen för flaggan
var flagga = {lat: XXX, lng: YYY};
// Kartan, centrerad vid flaggan
var map = new google.maps.Map(
document.getElementById ('karta'), {zoom: 4, centrum: flagga});
// Markören, placerad vid flaggan
var markör = ny google.maps.Marker ({position: flagga, karta: karta});
}
</ Script>
<skript asynk uppskjutning
src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">