WordPress Google Maps toevoegen aan je website

Een Google Maps kaartje invoegen in je berichten en pagina’s ziet er niet alleen goed uit, het is ook goed voor de gebruiksvriendelijkheid van je website.

In dit artikel behandel ik hoe je op twee verschillende manieren een kaartje van Google Maps op je website kunt integreren in slechts een aantal minuten.

De twee methodes die ik ga behandelen zijn:

1. Hoe je een kaartje vanaf Google Maps zelf kun embedden met een iframe
2. Hoe je een kaartje met een WordPress plugin kunt integreren

Video: Google Maps toevoegen aan je website

In onderstaande video laat ik zien hoe je een Google Maps kaartje kunt toevoegen aan je website via beide methodes. Je kunt vervolgens zelf bepalen welke methode je het best bevalt en waar je gebruik van wilt maken.

Wil je liever rustig de tekstuitleg lezen en de bijbehorende afbeeldingen bekijken? Lees dan hieronder verder.

Google Maps embedden met een iframe

Ga naar de website van Google Maps en voer de locatie in die je wilt tonen op je website. In dit voorbeeld maak ik gebruik van het adres van Google Nederland: Claude Debussylaan 34, 1082 MD Amsterdam.

Je krijgt dan het volgende te zien:

Rechtsonder op de kaart kun je klikken op het tandwiel icoontje en vervolgens op “Kaart delen of insluiten”.

Wanneer je hierop geklikt hebt opent er een pop-up waar je moet klikken op “Kaart insluiten”. Je krijgt nu de iframe code te zien die je op je website kunt plaatsen en een voorbeeld van de kaart.

Je hebt ook nog de mogelijkheid om het formaat van de kaart aan te passen. Dit kun je doen door op “normaal” te klikken. Je krijgt dan de opties Klein, Normaal, Groot en Aangepast formaat.

Wanneer je de juiste formaat hebt geselecteerd kun je de iframe code kopiëren in een bericht of pagina via de tekst editor op je WordPress website. Wanneer je nu je bericht of pagina bekijkt in je browser kun je zien dat deze kaart precies dezelfde functionaliteiten heeft als op de website Google Maps.

WordPress Google Maps plugin

Met de plugin Pronamic Google Maps voor WordPress is het ook mogelijk om eenvoudig een kaart op je website te laten weergeven.

Installeer en activeer de plugin en ga naar “Google Maps -> Algemeen”. Hier kun je instellen bij welke berichttypes je Google Maps wilt activeren.

Open nu een nieuw of bestaand bericht of pagina en scroll naar beneden op zoek naar de nieuwe sectie “Google Maps”. Het ziet er als volgt uit:

In deze sectie kun je een titel, beschrijving en het adres van de locatie die je wilt gebruiken invullen. Druk daarna op “Geocoderen” om het adres om te zetten in een pinnetje op de kaart. Het is ook mogelijk om eerst een pinnetje te zetten op de kaart en dit om te zetten naar een adres.

Nadat je dit gedaan hebt krijg je onderaan direct een preview te zien van je net gemaakte pinnetje en de gegevens die je hebt ingevuld op de kaart.

Om je net gemaakte Google map te gebruiken op je pagina of bericht moet je alleen nog een shortcode invullen op de plek waar het kaartje moet verschijnen. De shortcode die je kunt gebruiken is: [googlemaps width=610 height=400]

De width (breedte) en height (hoogte) kun je zelf naar wens aanpassen. Succes met het maken en plaatsen van je eigen Google map.