Home › Kennisbank › WordPress
Hoe voeg ik een Google Maps-kaart toe aan mijn WordPress-website?
Direct antwoord
Zoek je adres op in Google Maps, klik op Delen en kies Een kaart insluiten. Kopieer de code en plak die in WordPress in het blok Aangepaste HTML op de pagina waar de kaart moet komen. Voor één locatie heb je geen plugin nodig.
Wat heb je nodig?
- Een inlog voor het WordPress-dashboard met de rol Beheerder of Redacteur
- Het adres of de bedrijfsnaam die je op de kaart wilt tonen
- De pagina waarop de kaart moet komen, bijvoorbeeld je contactpagina
Stappenplan8 stappen
Welke manier past bij mijn website?
Er zijn vier manieren om een kaart van Google Maps op een WordPress-website te zetten. Welke past, hangt af van wat de kaart moet kunnen, van de snelheid van je website en van de privacy van je bezoekers.
- De insluitcode van Google Maps: de snelste manier, zonder plugin, voor één locatie. Het stappenplan beschrijft deze manier.
- Een plugin: voor meerdere locaties en meer instellingen.
- Een paginabouwer zoals Elementor of Divi.
- De Google Maps API: voor interactieve kaarten op maat.
Stappenplan 8 stappen
Stap 1: Zoek je locatie op in Google Maps
Ga naar Google Maps. Typ in het zoekveld linksboven je bedrijfsnaam of je adres en druk op Enter. Klik op de juiste locatie, zodat links het paneel met de gegevens van die locatie opent.
Stap 2: Open het venster Delen
Klik in het paneel met de gegevens van de locatie op Delen.
Stap 3: Kopieer de insluitcode
Klik op het tabblad Een kaart insluiten. Kies in de keuzelijst links van de code hoe groot de kaart wordt. Klik daarna op HTML kopiëren.
De code begint met <iframe. Een iframe is een venster in je pagina waarin een andere website wordt getoond, in dit geval de kaart van Google.
Stap 4: Log in op WordPress
Ga naar jouwdomein.nl/wp-admin en log in. Vervang jouwdomein.nl door je eigen domeinnaam.
Stap 5: Open de pagina waarop de kaart moet komen
Klik in het menu links op Pagina’s. Klik daarna op de titel van de pagina, bijvoorbeeld je contactpagina. De pagina opent in de blokeditor van WordPress (ook Gutenberg genoemd).
Stap 6: Voeg het blok Aangepaste HTML toe
Klik op het plusteken (Blok toevoegen) op de plek waar de kaart moet komen. Typ in het zoekveld Aangepaste HTML en klik op het blok Aangepaste HTML.
Stap 7: Plak de code in het blok
Klik in het blok op de knop waarmee je de HTML bewerkt. Er opent een venster met een codevak en een voorbeeld. Plak de code van Google Maps in het codevak met Ctrl+V (Windows) of Cmd+V (Mac) en klik op Updaten.
In oudere versies van WordPress plak je de code rechtstreeks in het blok.
Stap 8: Sla de pagina op
Klik rechtsboven op Opslaan. Bij een nieuwe pagina heet deze knop Publiceren.
Controleer of het gelukt is
Open de pagina op je website. Zie je de kaart met een markering op je adres en kun je de kaart verslepen en inzoomen, dan is het gelukt. Controleer op je telefoon of de kaart binnen het scherm past.
Hoe werkt het met een plugin, een paginabouwer of de Google Maps API?
Een plugin geeft meer functies en beheeropties. Bekende plugins zijn WP Go Maps (voorheen WP Google Maps) en MapPress. Je voegt locaties toe in de instellingen van de plugin en past daar de markeringen (markers), het zoomniveau en de stijl aan.
Let op: voor een kaart van Google Maps vragen deze plugins om een API-sleutel van Google. Een kaart op basis van OpenStreetMap kan in beide plugins zonder sleutel.
Een paginabouwer zoals Elementor of Divi heeft een eigen onderdeel voor een kaart. In Elementor heet de widget Google Maps. Je sleept het onderdeel naar de pagina, vult het adres in en bepaalt de opmaak terwijl je het resultaat direct ziet.
De Google Maps API is de geavanceerde optie voor interactieve kaarten op maat, geschikt voor professionele websites. Je hebt een API-sleutel nodig: een code waaraan Google herkent welke website de kaart opvraagt. Je activeert de sleutel in Google Cloud.
De API vraagt technische configuratie en Google kan vragen om facturering in te stellen.
Waar moet ik op letten bij privacy en snelheid?
- Privacy: Google kan via een ingesloten kaart trackingcookies plaatsen. Houd rekening met de AVG (in het Engels GDPR): noem Google Maps in je privacyverklaring en cookieverklaring en vraag toestemming als dat voor jouw website verplicht is.
- Snelheid: een kaart kan de laadtijd van je pagina verhogen. Zet een kaart alleen op pagina’s waar hij iets toevoegt, zoals de contactpagina.
- Lazy loading: daarbij laadt de kaart pas als de bezoeker in de buurt van de kaart komt. De code van Google bevat daarvoor al
loading="lazy". Laat dat deel van de code staan.
Lees meer over lazy loading in WordPress.
Werkt het niet?
Je ziet de code als tekst op de pagina in plaats van een kaart
De code staat dan in een gewoon tekstblok. Verwijder de code, voeg het blok Aangepaste HTML toe en plak de code daarin.
De kaart is verdwenen nadat je de pagina hebt opgeslagen
WordPress haalt dit soort code weg bij gebruikers die er geen rechten voor hebben, zoals de rollen Auteur en Bijdrager. Log in met een account met de rol Beheerder of Redacteur en plak de code opnieuw.
Je hebt de link van Google Maps in het blok Insluiten geplakt en krijgt een foutmelding
Het blok Insluiten werkt met diensten zoals YouTube, maar niet met Google Maps. Gebruik de code van het tabblad Een kaart insluiten en plak die in het blok Aangepaste HTML.
De kaart is te smal of valt op een telefoon buiten het scherm
Zoek in de geplakte code naar width="600" en verander dat in width="100%". De kaart neemt dan de volle breedte van de pagina of de kolom.
Je vindt het blok Aangepaste HTML niet
Je pagina opent dan waarschijnlijk in een paginabouwer zoals Elementor of Divi. Gebruik het onderdeel voor Google Maps van die paginabouwer.
Veelgestelde vragen
Heb ik een API-sleutel nodig voor een kaart op mijn website?
Niet voor de insluitcode uit Google Maps. Een API-sleutel is alleen nodig als je de Google Maps API gebruikt of als een plugin of paginabouwer erom vraagt.
Kan ik meerdere locaties op één kaart tonen?
Niet met de insluitcode van één locatie. Gebruik daarvoor een plugin zoals WP Go Maps of MapPress, of de Google Maps API.
Is een kaart op mijn website hetzelfde als vindbaar zijn in Google Maps?
Nee. Een kaart op je website laat alleen zien waar je zit. Lees hoe je bedrijf in Google Maps verschijnt als je daar zelf gevonden wilt worden.
Hulp nodig?
Schakel de helpdesk van ViVortis in als:
- je de kaart niet op de pagina krijgt, ook niet met de rol Beheerder
- je meerdere locaties of een kaart in je eigen huisstijl wilt tonen
- je cookiemelding de kaart tegenhoudt en je niet weet hoe je dat instelt
- je website merkbaar trager is sinds de kaart erop staat
Dien een ticket in via de helpdesk van ViVortis en voeg waar mogelijk een screenshot toe.
Lukt het niet?
Dien een ticket in met een screenshot van wat je ziet. De helpdesk reageert meestal binnen één werkdag.