Probleem:
Je heb een website of webapplicatie ontwikkeld die gebruik maakt van Google Maps. Op basis van de locatie van de bezoeker wil je uitrekenen hoever het is tot bepaalde adressen (markers) op de kaart.
Hiervoor heb je eerst de locatie van de bezoeker nodig. Maar de code die je gebruikt om de locatie te bepalen werkt niet.
Belangrijk aandachtspunt is dat een bezoeker toestemming moet geven om zijn of haar locatie te kunnen bepalen. Zonder toestemming zal de code nooit werken.
In onderstaande voorbeelden zijn de JS sluitingtags achterwege gelaten omdat WordPress moeite heeft om dit juist te tonen. De oplossing gaat telkens specifiek over de waarde in de src parameter.
Oplossing 1 – API sleutel:
Heb je gebruik gemaakt van een Google API key? Zonder API key kan je Google Maps niet integreren in jouw eigen website. Vroeger was onderstaande regel voldoende:
<script src="https://maps.googleapis.com/maps/api/js
Tegenwoordig moet dit lijken op:
<script src="https://maps.googleapis.com/maps/api/js?key=< jouw API KEY >
Een API key kan je gratis aanvragen in de Google API Console door in te loggen met een Google Account.
Oplossing 2 – API locatie beperkingen:
Staan de rechten voor de API key juist ingesteld? Mag je de API key gebruiken op het domein waar de website op staat? Je kan dit in de Google API console heel specifiek instellen om misbruik te voorkomen.
Beperk je de API key niet dan kunnen andere mensen jouw sleutel gebruiken. Aangezien Google tegenwoordig geld rekent als je per maand boven een bepaald limiet komt is het belangrijk dat je dit goed instelt.
Oplossing 3 – API functionaliteit beperkingen:
Je kan ook instellen welke functionaliteiten je met de API key mag gebruiken. Stel je dit heel precies in dan kan het zo zijn dat je geen locatie mag bepalen. Zorg ervoor dat in de Google API console ingesteld staat dat je geometry en distance mag gebruiken. Geometry is nodig om de locatie te bepalen en distance voor de afstandsberekeningen.
Oplossing 4 – laad de juiste bibliotheek in:
De standaard regel code om Google Maps in te laden in jouw website (zie oplossing 1) is niet voldoende om de locatie van een bezoeker te bepalen. Hiervoor moet je de geometry bibliotheek (library) inladen. Zie hiervoor onderstaand voorbeeld.
<script src="https://maps.googleapis.com/maps/api/js?key=< jouw API KEY >&libraries=geometry
Oplossing getest op:
Website met Google Maps waarop afstandsberekeningen uitgevoerd moeten worden