Wordpress

Google Maps kaartje toevoegen aan je WordPress website

01 maart 2022

Het toevoegen van een Google Maps kaartje op je WordPress website kan erg handig zijn. Zo kunnen (potentiële) klanten heel gemakkelijk zien waar jouw bedrijf is gevestigd en hoe ze daar kunnen komen. Het toevoegen van zo’n kaartje is niet erg moeilijk. Hieronder zal ik 2 manieren beschrijven.

01. Embed via Google Maps zelf

Via Google zelf kun je heel eenvoudig een kaart, een Street View-afbeelding, een routebeschrijving of een lokale zoekopdracht insluiten (embedden) en deze op je WordPress website en/of blog plaatsen.

Ga naar maps.google.com en vul je adres in bij de zoekbalk en zoek je eigen bedrijf (of de locatie waarvan je een embed wilt maken). Klink vervolgens op het icoontje waarmee je de map kunt delen, zie screenshot hieronder ter verduidelijking.

Klik vervolgens op ‘Een kaart insluiten’.

Kopieer de code die tevoorschijn komt. Let op: de standaard embed code van Google Maps is niet responsive. Maar niet getreurd: je kunt de embed zelf responsive maken. Ga naar embedresponsively.com en selecteer Google Maps in plaats van YouTube. Plak de gekopieerde code in het invulveld en klik op de blauwe knop Embed.

Onderaan krijg je een nieuwe code te zien. Kopieer deze en ga vervolgens in WordPress naar de pagina waar je het kaartje wilt toevoegen. Klik vervolgens op het tabje “Tekst” in plaats van “Visueel”.

Voeg daar de code toe. Et voilà! Je hebt een responsive Google Maps kaartje op je website staan.

02. WP Google Maps plugin

Met de plugin WP Google Maps kun je heel gemakkelijk een GM kaartje op je WordPress website plaatsen. Deze zal dan (met de juiste instellingen) ook responsive zijn.  Volg de instructies van de plugin. Ik voeg zelf liever geen plugins toe voor functies die je ook zónder plugins kunt maken. Meer plugins betekent namelijk wel dat je website langzamer wordt, dat er meer onderhoud moet worden gedaan én dan je meer risico loopt om gehackt te worden. Vandaar dat ik het zelf liever op de eerste manier doe, via embed codes.