Veel mensen willen een kaart van Google Maps op hun website. Dit is al heel lang mogelijk en wordt vaak gedaan. Vooral wanneer je meerdere locaties wilt weergeven is een kaartje heel nuttig. Denk aan het weergeven van meerdere evenementen, winkels, leden, restaurants etc. Een mooi voorbeeld waarin ik een kaart heb gebruikt zie je op deze website van style adviseurs. Deze kaart heb ik gemaakt met Toolset. Binnen deze kaart is het mogelijk om te filteren op afstand. Maar je kunt ook filteren op andere gegevens, bijvoorbeeld provincie. Met Toolset Maps kun je ook een link of andere informatie in het adresveld plaatsen (in dit geval is de bedrijfsnaam een link), een eigen gekozen icoon etc.

Hoe kan ik een kaart van Google Maps op mijn website zetten?

Voor het plaatsen van een kaart zijn veel plugins ontwikkeld. Wanneer je bij “Nieuwe plugin” zoekt op het woord “maps”, vind je tientallen hits. Er zijn hele eenvoudige, maar ook heel uitgebreide plugins met vele mogelijkheden ontwikkeld. Alle hebben ze echter één ding gemeen. Om een kaart te kunnen weergeven heb je een Google Maps API key nodig. Bij het installeren van een maps plugin is er altijd wel een veld waar je de API key kunt invullen. Ik ga hier geen plugins bespreken of aanraden maar wil je vertellen hoe je een API key kunt verkrijgen.

Hoe kom ik aan een geldige API key?

Jarenlang was het heel makkelijk om een Google Maps kaartje op je website te zetten. Het was een gratis optie die eigenlijk op geen enkele website mocht ontbreken. Op elke website die ik maakte plaatste ik een kaartje op de contactpagina. Achteraf een ongekende luxe. Op een gegeven moment werkten deze kaartjes niet meer. Hoe vaak kom je het niet tegen? Een melding als deze:

Google Maps API error

Google heeft (terecht?) besloten dat er betaald moet worden voor deze dienst.
Ze hebben bedacht dat de kosten afhankelijk moeten zijn van het aantal weergaves per maand. Deze ondergrens zorgt ervoor dat websites met weinig weergaves nog steeds gratis gebruik kunnen maken van deze dienst. Voor de meeste websites is dit ruim voldoende.

Je krijgt van Google elke maand $ 200,00 tegoed.
Kijk hier voor alle prijzen en voorwaarden:
https://cloud.google.com/maps-platform/pricing?hl=nl
https://cloud.google.com/maps-platform/pricing/sheet?hl=nl

Het is de bedoeling dat je je betaalgegevens van te voren opgeeft, voor je toestemming krijgt om een kaartje op je website te plaatsen. Wanneer je in een maand meer dan $ 200,00 hebt verbruikt wordt dit afgeschreven van je rekening. Je krijgt maandelijks een factuur. Ook wanneer deze € 0,00 is.

Belangrijk: je kunt alleen gebruik maken van een creditcard of zakelijke bankrekening als betaalmiddel!

Om een kaartje werkend te krijgen is het nodig om verbinding te maken tussen je website en Google Maps. Deze verbinding noemen we een API (Application Programming Interface). Deze API is een exclusieve verbinding tussen jouw website en Google Maps. Misschien heb je al eerder een API gehad en doet het kaartje het toch niet meer. Dan is het nodig om na te gaan of je aan alle nieuwe eisen voldoet die Google Maps stelt aan het gebruik van de API.

Handleiding: Google Maps voor op je website

Google Maps Api handleidingOm allerlei redenen, van niet meer gratis beschikbaar zijn tot allerlei privacyregels, is het gigantisch ingewikkeld en tijdrovend geworden om een Google Maps API aan te vragen. Daarom heb ik een handleiding gemaakt waarmee je stap voor stap, zonder zelf het wiel uit te hoeven vinden, een API kunt aanmaken. De handleiding kun je hier bestellen.

De handleiding is bedoeld voor iedereen die hiermee aan de slag wil gaan. Voor zichzelf of voor een ander. Ook voor webbouwers is het een uitkomst omdat het ze werkelijk uren van frustratie bespaart wanneer een klant dit wil. De handleiding staat vol screenshots en tips en telt 28 pagina’s. Geactualiseerd in april 2020.

Google Maps API Checker

In mijn zoektocht naar informatie over Google Maps API’s vond ik nog deze Chrome extensie. Dit is een fijne tool voor webbouwers om snel te controleren of de API key de oorzaak is bij problemen met de weergevave van een kaartje.

Wat is een API?

Een API is een afkorting van Application Programming Interface. Een API bestaat uit een code waarmee verschillende programma’s, die op verschillende websites draaien, met elkaar kunnen communiceren. Om toegang te krijgen tot externe gegevensbronnen en deze weer te geven op je eigen website, heb je een API-key nodig die je kunt aanvragen bij de betreffende dienst. Hiermee kun je bijvoorbeeld een Google Map op je website zetten. In feite toon je dan functionaliteit van Google op je website en dat functioneert ook alsof je op de Google Maps site bent.