Google Maps op je website? Dan heb je een API-key nodig. Aanvragen doe je zo!

Een probleem waar veel bedrijven tegen aan lopen is dat er een API-Key nodig is om Google Maps op de website weer te geven. Gelukkig is dit gemakkelijker in te regelen dan je vooraf misschien zou denken. Aan de hand van deze blog wordt het activeren van Google Maps een fluitje van een cent. Je krijgt van Google zelfs een maandelijks krediet van $200 waarmee Google Maps maar liefst 28.000 keer getoond kan worden op je site! Meer informatie over de kosten van Google Maps kan je hier terugvinden: https://cloud.google.com/maps-platform/pricing/sheet/?hl=nl. Allereerst is het van belang dat je de JavaScript Maps API inschakelt en jouw betalingsgegevens koppelt aan een API key, voordat je de kaart kunt tonen op je website. Die key maak je aan via: https://cloud.google.com. Hier heb je een Google Account voor nodig. Geen zorgen, in deze blog nemen we je er stap voor stap in mee.

Factureringsaccount Toevoegen

De eerste stap bestaat uit het koppelen van een Factureringsaccount aan je Google Cloud project.
In de onderstaande video zie je hoe dit moet.

• Klik op het menu icoontje links bovenin.
• Vervolgens komt het menu tevoorschijn. Klik op ’Facturering’.
• Klik vervolgens op ’Naar gelinkt Factureringsaccount’.
• Selecteer het juiste land en ga akkoord met de ’Servicevoorwaarden’. Klik daarna op ’Doorgaan’. Hier vul je je persoonlijke gegevens in en klik je vervolgens op ’Mijn proefperiode starten’.

API-Key Aanmaken.

Nu je een factureringsaccount hebt toegevoegd kun je door naar de volgende stap. Het aanmaken van de API-Key! In de onderstaande video zie je hoe dit moet.

• Klik opnieuw op het menu icoontje. Het menu komt nu tevoorschijn. Beweeg met je cursor over ’API and services’ en klik vervolgens op ’Inloggegevens’.
• Daarna klik je op ’Inloggegevens maken’ en selecteer je de optie ’API-sleutel’.
• Nu moet je de sleutel nog wel beperken zodat deze niet onbedoeld gebruikt kan worden door externe partijen.
• Klik daarom op ’Sleutel beperken’.
• Selecteer bij ’App-beperkingen’ >> de optie ’HTTP-verwijzingen’.
• Klik dan op ’Een item toevoegen’.
• Vul daar de URL in van je website.
• Vul daar de URL in van uw website.
• Zet altijd een ’/*’ achter de URL van je website. Dit zorgt ervoor dat de API niet alleen op de homepagina van de website werkt, maar juist op iedere pagina! ?
• Klik dan op ’Gereed’.
• Klik vervolgens op ’Opslaan’.

Maps JavaScript API 

Om Google Maps weer te geven op je website dien je dit nu alleen nog te activeren. In de onderstaande video zie je hoe het moet.

• Klik op het menu icoontje links bovenin.
• Daar klik je op “Maps JavaScript API”.
• Klik vervolgens op “Inschakelen”.

De allerlaatste stap: de API key doorsturen naar je webdeveloper

Nu je een factureringsaccount hebt gekoppeld aan je Google Cloud, je de JavaScript Maps API hebt ingeschakeld en je een API-Key hebt aangemaakt, ben je er nu helemaal klaar voor om Google Maps op je website te gebruiken. Bij deze laatste stap stuur je de API-Key door naar de developer van je website. In de onderstaande foto zie je hoe je API-Key er uit ziet. Deze is te vinden bij API’s en services >> Inloggegevens.

Vragen over deze blog? Neem contact op met

Nick Heurter