Download een Google Maps API-sleutel voor uw site
De beste manier om een Google-kaart aan uw website toe te voegen, is door de Google Maps API te gebruiken. En Google raadt u aan een API-sleutel te gebruiken om de kaarten te gebruiken.
U hoeft geen API-sleutel te krijgen om Google Maps API v3 te gebruiken, maar het is erg handig omdat u hiermee uw gebruik kunt controleren en extra toegang kunt betalen. Google Maps API v3 heeft een quotum van 1 verzoek per seconde per gebruiker tot een maximum van 25.000 verzoeken per dag. Als uw pagina's die limieten overschrijden, moet u de facturering inschakelen om meer te ontvangen.
Hoe een Google Maps API-sleutel te krijgen
- Log in op Google met uw Google-account.
- Ga naar de Developers Console
- Blader door de lijst en vind de Google Maps API v3 en klik vervolgens op de knop "UIT" om hem in te schakelen.
- Lees en ga akkoord met de voorwaarden.
- Ga naar de API's-console en selecteer 'API-toegang' in het menu aan de linkerkant
- Klik in het gedeelte "Eenvoudige API-toegang" op de knop "Nieuwe server maken …".
- Voer het IP-adres van uw webserver in. Dit is het IP waar uw Maps-verzoeken vandaan komen. Als u uw IP-adres niet weet, kunt u het opzoeken.
- Kopieer de tekst op de regel 'API-sleutel:' (met uitzondering van die titel). Dit is uw API-sleutel voor uw kaarten.
Converteer uw adres naar coördinaten
Als u Google Maps op uw webpagina's wilt gebruiken, moet u de breedtegraad en lengtegraad voor de locatie hebben. Je kunt deze van een GPS halen of je kunt een online tool als Geocoder.us gebruiken om het je te vertellen.
- Ga naar Geocoder.us en typ uw adres in het zoekvak.
- Kopieer het eerste nummer voor de breedtegraad (zonder een letter vooraan) en plak het in een tekstbestand. U hebt de graadmeter (º) niet nodig.
- Kopieer het eerste getal voor de lengtegraad (opnieuw zonder een letter vooraan) en plak het in uw tekstbestand.
Je lengte- en breedtegraad ziet er ongeveer zo uit:
40.756076-73.990838
Geocoder.us werkt alleen voor Amerikaanse adressen, als u de coördinaten in een ander land moet ophalen, moet u naar een vergelijkbaar hulpmiddel in uw regio zoeken.
03 of 05De kaart toevoegen aan uw webpagina
Voeg eerst het mapscript toe aan de
van uw document
Open uw webpagina en voeg het volgende toe aan de HOOFD van uw document.
Wijzig het gemarkeerde gedeelte in de lengte- en breedtegraden die u in stap twee hebt genoteerd.
Ten tweede, voeg het kaartelement toe aan uw pagina
Zodra u alle scriptelementen hebt toegevoegd aan de HOOFD van uw document, moet u uw kaart op de pagina plaatsen. U doet dit door een DIV element met de id = "map-canvas" attribuut. Ik raad je aan deze div ook te stylen met de breedte en hoogte die op je pagina passen:
Eindelijk uploaden en testen
Het laatste wat u moet doen, is uw pagina uploaden en testen of uw kaart wordt weergegeven. Hier is een voorbeeld van een Google-kaart op de pagina. Let op: vanwege de manier waarop het CMS van About.com werkt, moet u op een koppeling klikken om de kaart weer te geven. Dit is niet het geval op uw pagina.
Als uw kaart niet wordt weergegeven, probeert u deze te initialiseren met een LICHAAM attribuut:
onload = "initialiseren ()" >
Andere dingen om te controleren of uw kaart niet wordt geladen zijn onder andere:
- Zoek naar typefouten in uw JavaScript, inclusief case. JavaScript is hoofdlettergevoelig.
- Zorg ervoor dat u de
zoomencentrumopties ingesteld. - Zorg ervoor dat uw
DIVelement staat op de pagina met de juiste ID. - Zorg ervoor dat uw
DIVelement heeft een hoogte.
Voeg een markering toe aan uw kaart
Maar wat heb je aan een kaart van je locatie als er geen markering is die mensen vertelt waar ze naartoe moeten gaan?
Als u een standaard rode markeerder van Google Maps wilt toevoegen, voegt u het volgende toe aan uw script onder de var kaart = … lijn:
var myLatlng = new google.maps.LatLng ( lengte-en breedtegraad );var marker = new google.maps.Marker ({positie: myLatlng,kaart: kaart,titel:" Voormalig hoofdkantoor '});
Wijzig de gemarkeerde tekst in uw breedtegraad en lengtegraad en de titel die u wilt weergeven wanneer mensen over de markering zweven.
U kunt zoveel markeringen aan de pagina toevoegen als u wilt, u hoeft alleen nieuwe variabelen met nieuwe coördinaten en titels toe te voegen, maar als de kaart te klein is om alle markeringen weer te geven, worden deze niet weergegeven tenzij de lezer uitzoomt.
var latng 2 = new google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = nieuwe google.maps.Marker ({positie: duur 2 ,kaart: kaart,titel:" Apple computer '});
Hier is een voorbeeld van een Google-kaart met een markering. Let op: vanwege de manier waarop het CMS van About.com werkt, moet u op een koppeling klikken om de kaart weer te geven. Dit is niet het geval op uw pagina.
05 of 05Voeg een tweede (of meer) kaart toe aan uw pagina
Als je naar mijn voorbeeld Google maps-pagina hebt gekeken, merk je dat ik meer dan één kaart op de pagina heb staan. Dit is heel gemakkelijk om te doen. Hier is hoe.
- Haal de breedtegraad en lengtegraad van alle kaarten die u wilt weergeven, zoals we hebben geleerd in stap 2 van deze tutorial.
- Plaats de eerste kaart zoals we hebben geleerd in stap 3 van deze tutorial. Als u wilt dat de kaart een markering heeft, voegt u de markering toe zoals in stap 4.
- Voor de tweede kaart moet u 3 nieuwe regels toevoegen aan uw initialize () -script:
var latlng2 = new google.maps.LatLng ( tweede coördinaten );var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Als u ook een markering op de nieuwe kaart wilt, voegt u een tweede markering toe die wijst naar de tweede coördinaten en de tweede kaart:
var myMarker2 = new google.maps.Marker ({position: latlng2 , kaart: map2 , titel: " Uw markeertitel ' }); - Voeg vervolgens de tweede toe waar u de tweede kaart wilt. En zorg ervoor dat je het een geeft
id = "map_canvas_2"ID KAART. - Wanneer uw pagina wordt geladen, worden twee kaarten weergegeven
Hier is de code van een pagina met twee Google-kaarten erop:
