Integratie Google Maps API

Hoe werkt Google Maps op mijn website?

Het is mogelijk om jouw organisatie op de kaart te tonen op de website middels de 'kaart widget'. Om deze widget te kunnen gebruiken heb je een Google Maps API Key nodig, welke bij de organisatie instellingen ingevoerd dient te worden.

Als je een kaart van Google Maps op een pagina van je website toont, wordt er bij elk bezoek aan deze pagina verbinding gemaakt met de Google Maps API. Sinds juli 2018 heeft Google besloten om een maximum van 28.000 kaartweergaven per maand in te stellen aan het gebruik. Ga je over dit maximum heen, dan moet je voor de dienst betalen. De meeste websites redden zich goed met deze limitatie, hiervoor zal de integratie met Google Maps dan ook gratis blijven. Google houdt bij hoevaak er gebruik gemaakt wordt van de dienst. Daarvoor moet je nu zelf een API Key aanvragen en invoeren.

1. Google Maps API Key aanvragen 

2. Google Maps API Key invoeren in het CMS

3. Facturatieaccount instellen

4. Upgrade

Google Maps API Key aanvragen

Om een eigen API Key aan te vragen dien je de volgende stappen te doorlopen:

1.Ga naar de Google Cloud Console;

2. Log in met je Google Account;

3. Accepteer de servicevoorwaarden;

4. Klik in het linkermenu op API's & services;

5. Maak een project aan;

6. Voer bij de projectnaam een gewenste naam in, als voorbeeld Maps API- gevolgd door je eigen domeinnaam;

7. Zoek in de zoekbalk op 'maps' en voeg de volgende twee APIs toe

8. Schakel 'Maps JavaScript API' in;

9. Schakel 'Maps Embed API' in;

10. Navigeer naar het tabblad 'Inloggegevens';

11. Klik op '+ Creëer inloggegevens';

12. Kies 'API sleutel';

13. Kopieer de API-Sleutel, deze hebben we zometeen nog nodig;

14. Klik vervolgens op 'Beperk de sleutel';

15. Door beperkingen op domeinnaam in te voeren voorkom je dat een andere partij jouw API gaat gebruiken, waardoor je het limiet van 25.000 zou kunnen overschrijden;

16. Kies bij 'App-beperkingen' voor 'HTTP-verwijzingen (websites)';

17. Voer bij 'Verzoeken van deze HTTP-verwijzing (websites) accepteren' het volgende in: *.mijnwebsite.nl/* en *.bookingexperts.nl/*

18. Voer API beperkingen in voor Maps Embed API en Maps Javascript API.

19. Klik op 'Opslaan' om de wijzigingen op te slaan.

Google Maps API Key invoeren in het CMS

1. Log in bij je administratie in het BEX CMS;

2. Navigeer naar 'Instellingen' > 'Organisatie instellingen';

3. Voer bij 'Integratie' onder Google Maps API key de API key in die je bij stap 12 hebt gekopieerd;

4. Vergeet niet om de instellingen op te slaan.

5. Controleer of de widgets werken, door een kaarten widget en een Google Maps widget te plaatsen op een testpagina en klik op preview. Zie je 2 Google Maps kaartjes? Dan werkt het!

Facturatieaccount instellen

Om daadwerkelijk gebruik te kunnen maken van de Google Maps API, dient het hierboven aangemaakte project gekoppeld te zijn aan een goedgekeurd facturatieaccount binnen de Google Cloud Console.

1. Ga naar 'Facturering';

2. Klik op 'Factureringsaccount toevoegen';

3. Vul de gegevens in;

4. Klik op 'Opslaan';

5. Ga terug naar 'Facturering' in het menu;

6. Klik de optie om het facturatieaccount te linken aan het project.

Upgrade

Je kunt een melding krijgen voor een update om Google Cloud te ontgrendelen. Je krijgt dan bovenin Google Cloud Platform de volgende melding te zien: 'Upgrade nu om Google Cloud Platform te ontgrendelen'. Klik op 'Upgraden'.