Vad du ska veta
- Gå till Google Cloud Platform Console och skapa eller välj ett projekt och klicka sedan på Fortsätt. På sidan Inloggningsuppgifter får du en API-nyckel
.
.
Den här artikeln förklarar hur du infogar en Google-karta med en platsmarkör på din webbsida. Denna process inkluderar att hämta en speciell mjukvarunyckel från Google och sedan lägga till relevant JavaScript till sidan.
Erhåller na Google Maps API Key
För att skydda sina servrar från att bombarderas av förfrågningar om kartor och platssökningar, stryper Google åtkomsten 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 kraftig åtkomst till Googles servrar (till exempel för att utveckla en webbapp).
På Inloggningsuppgifter sida, skaffa en API-nyckel. Vid behov, ställ in relevanta begränsningar för nyckeln.
Säkra din API-nyckel med hjälp av bästa praxis rekommenderas av Google.
Om du tror att du måste visa kartan oftare än din kostnadsfria kvot tillåter, skapa ett faktureringsavtal med Google. De flesta webbplatser, särskilt lågtrafikerade bloggar eller nischwebbplatser, kommer sannolikt inte att förbruka mycket av kvottilldelningen.
Infoga JavaScript på din webbsida
Infoga följande kod i din Webbsida, i BODY-delen av HTML-dokumentet:
// Initiera och lägg till kartfunktionen initMap {
// Platsen för flaggan var flagga = {lat: XXX, lng: YYY};
hem
eller kontor
eller
eller detroit
). Du kan köra den här koden och lämna flagga som den ä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.
I huvudet på ditt HTML-dokument, ange CSS-begränsningar för kartan, inklusive storlek, färger och sidplacering.
Googles kartskript innehåller attribut som zoom
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 ställt in ett betalningssystem för API-åtkomst, eftersom du kan få en hög räkning om dina referenser blir stulna. I synnerhet exemplet vi har visat här
bädda in API-nyckel direkt i koden – vi har gjort detta i syfte 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.