Home / WordPress / WordPress Google Maps toevoegen aan je website

WordPress Google Maps toevoegen aan je website

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.

Abonneer je op mijn YouTube kanaal

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:

Google Nederland op Google maps

Rechtsonder op de kaart kun je klikken op het tandwiel icoontje Tandwiel Google Maps 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.

Google maps popup kaart insluiten

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

Pronamic Google Maps

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:

WordPress Google Maps

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.


WordPress Hulp Nodig? Join Het WP Lab

Het WordPress Lab Mockup

Heb je vragen aan de hand van dit artikel of wil je verder op weg geholpen worden met je website?

Sluit je aan bij Het WordPress lab, een community voor WordPress-liefhebbers waarin ik antwoord geef op jouw WordPress vragen en je toegang krijgt tot al mijn WordPress cursussen.

«
»

4 reacties op “WordPress Google Maps toevoegen aan je website”

  1. Merve On avatar
    Merve On

    Hallo,

    Er is iets misgegaan tijdens instellen.
    Ik heb alle stappen gevolgd maar er staat volgende melding:
    Google Maps is niet correct geladen op deze pagina. Zie de JavaScript-console voor technische details

    Waar kan het misgaan?

    Gr. Merv

    1. Maikel van de Weerd avatar

      Dat kan ik helaas niet zeggen vanaf hier.

  2. Agnes van der Graaf avatar
    Agnes van der Graaf

    Hallo,

    Ik ben op zoek naar een map met de provincies. Is die er ook?

    warme groet
    Agnes

    1. Maikel van de Weerd avatar

      Bij Google maps zie je niet echt de provincies en heel veel andere kaarten zijn er niet voor WordPress. Wel zou je naar Interactive World Maps kunnen kijken, maar dit is wel een betaalde plugin.

      Verder heb je ook nog wel de gratis plugin RVM – Responsive Vector Maps. Wellicht dat deze plugin ook een goede optie is.