Google maps kaart toevoegen aan je WordPress website

Hoe kun je een Google Maps kaart toevoegen aan je WordPress website? In deze handleiding laten we zien hoe je eenvoudig een Google kaartje in je website zet. Dit is mogelijk met of zonder WordPress plugin.

Handmatig een Google Map toevoegen in WordPress

Tijdsduur: 2-5 minuten

Dit is de meest simpele methode en werkt altijd. En dit zonder gebruik te maken van een plugin of een Google API code. Je kan op deze manier een Google Maps kaartje in een pagina of bericht plaatsen maar ook in je sidebar met behulp van de HTML-widget.

Stap 1: Ga naar Google Maps

Ga naar Google Maps en typ het adres in van de locatie die je wilt weergeven of zoek naar een locatie. Dit kan ook een bedrijfsnaam zijn. In dit voorbeeld gebruiken we CabFab, het voormalige Caballero fabrieksterrein waar we gevestigd zijn en WordPress cursussen in Den Haag geven.

google maps kaart handleiding toevoegen wordpress website
Zoek in Google Maps

Stap 2: Klik op knop ‘Delen’

Zodra je de locatie hebt gevonden, klik je op de knop ‘Delen’ of ‘Share.

google maps kaart handleiding toevoegen wordpress website
Klik op knop ‘Delen’

Stap 3: Kopieer de iframe-code

Je krijgt nu een pop-up scherm. Hierin wordt de code weergegeven die je in je WordPress website dient te plaatsen. Deze code begint altijd met een haakje en dan iFrame. Kopieer de iframe-code of klik eventueel nog op ‘Aanpassen’ om het ontwerp en formaat van de kaart op je site verder aan te passen.

google maps kaart handleiding toevoegen wordpress website
Kopieer de iframe-code

Stap 4: Plak de code op je pagina

Ga naar je eigen WordPress-website en plak de code in een bericht of pagina. De code ziet er ongeveer uit:


<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2452.791095782833!2d4.343352915790578!3d52.0653273797307!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c5b6559100d279%3A0xb1b6aeeb06dc0115!2sHuurdersvereniging+%22Caballero+Fabriek%22!5e0!3m2!1snl!2sbe!4v1537874740668" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Je kan het ook testen met de bovenstaande code. Sla je bericht of pagina op en check je Google Maps kaart op je site. Klaar. Enjoy!


Google Maps kaart toevoegen met een WordPress plug-in

Tijdsduur: 15-30 minuten

De eerste methode werkt prima. Als kaarten een belangrijke rol spelen voor je site en je vaker kaarten in je berichten moet plaatsen, raden we je aan een plug-in te gebruiken. Voordeel is ook dat je bijvoorbeeld het ikoontje van je locatie kan aanpassen, bijvoorbeeld het logo van je organisatie. Er zijn ontzettend veel plugins op de markt. De meest uitgebreide is de Advanced Google Maps WordPress Plugin. Voor eenvoudige toepassingen kun je de MapPress Easy Google Maps WordPress plug-in gebruiken. In deze handleiding laten we hieronder even MapPress zien.

Google Maps toevoegen met MapPress Easy Google Maps

Volg de volgende stappen:

  1. Installeer en activeer de plugin.
  2. Bewerk een bericht / pagina waar je de kaart wilt toevoegen.
  3. Scroll omlaag naar MapPress-sectie op uw bewerkingsscherm en klik op de knop Nieuwe kaart.
  4. Je kan hier een nieuwe kaart aanmaken
  5. Voeg de kaart in op je pagina

Succes!


Ook interessant