Google Maps in WordPress toevoegen is een klusje van vijf minuten. Het helpt vertrouwen op te bouwen, versterkt je lokale SEO en maakt het makkelijker om bij je te kopen. Maar ervoor zorgen dat de kaart goed wordt weergegeven en alle functies heeft die je nodig hebt, kan uren kosten. En als je vergeet rekening te houden met mobiele gebruikers, merk je misschien niet eens dat de kaart wordt afgesneden op kleine schermen.
Deze handleiding leidt je door drie opties om kaarten aan je WordPress-site toe te voegen: een native iFrame, een kaartplug-in en een gratis widget. We behandelen ook veelvoorkomende problemen en afwegingen, zodat je kunt bepalen welke optie het beste bij je past.
Drie opties om Google Maps in WordPress in te sluiten
| Method | API key required | Cost | Mobile-responsive | Multi-pin support | Setup time |
|---|---|---|---|---|---|
|
Native iFrame |
Nee |
Gratis |
Nee; vaste breedte/hoogte |
Nee |
Ongeveer 5 minuten |
|
WordPress-plug-in |
Ja; gratis voor 10.000 kaartweergaven/maand |
Gratis voor basisfuncties; betaald voor geavanceerde functies |
Afhankelijk van de plug-in |
Ja; vaak achter een betaalmuur |
Ongeveer 15–25 minuten |
|
Jotform Google Maps Widget |
Ja; gratis voor 10.000 kaartweergaven/maand |
Gratis widget; inclusief geavanceerde functies |
Ja |
Ja; gratis |
Ongeveer 15 minuten |
Optie 1: Gebruik een native Google Maps iFrame
De Google Maps iFrame-optie is de eenvoudigste en snelste manier om een kaart op je website te krijgen. Je zoekt je bedrijf op in Google Maps, klikt op Delen, kopieert de code en plakt deze op een WordPress-pagina. Hieronder vind je een stapsgewijze uitleg zodat je snel aan de slag kunt.
De eenvoud is tegelijkertijd ook een beperking. Je kunt het uiterlijk van de kaart niet aanpassen, geen meerdere pins toevoegen en geen extra informatie weergeven bovenop de standaardweergave. Bovendien moet je experimenteren met kaartformaten en je WordPress-paginalay-outs om ervoor te zorgen dat de kaart bruikbaar is op mobiel.
Een Google Maps iFrame insluiten
Voordat je begint, registreer je je bedrijf op het Google Bedrijfsprofiel-platform. Hiermee kun je je volledige informatie weergeven in Google Maps, inclusief openingstijden, reviews of je menukaart. Als je alleen naar een adres wilt verwijzen dat niet van jou is of naar een herkenningspunt, ga dan direct naar de eerste stap.
De insluitcode ophalen uit Google Maps
- Ga naar google.com/maps en zoek op je bedrijfsnaam of adres.
- Controleer of je de juiste pin hebt geselecteerd door de bedrijfsgegevens aan de linkerkant van het scherm te bekijken.
- Klik op Delen.
- Er verschijnt een pop-up op het scherm. Klik op het tabblad Kaart insluiten.
- Er verschijnt een voorbeeld van hoe de kaart er op je website uit zal zien. Standaard is het formaat ingesteld op medium; je kunt kiezen voor een kleine of grote kaart, of zelfs een aangepast formaat selecteren via het dropdownmenu linksboven.
- Nadat je het formaat hebt gekozen, klik je op HTML kopiëren. Hiermee wordt het iFrame-codefragment naar het klembord gekopieerd.
Insluiten in WordPress (Blok-editor/Gutenberg)
- Open in WordPress de pagina of het bericht waar je de kaart wilt plaatsen.
- Klik op het +-pictogram voor het invoegen van blokken, typ HTML om te filteren en klik op Aangepaste HTML om het blok aan de pagina toe te voegen.
- Klik in het nieuwe blok op HTML bewerken.
- Plak de iFrame-code in de pop-up. Het voorbeeld wordt aan de rechterkant weergegeven. Klik op Bijwerken om af te ronden.
- De pagina toont nu de ingesloten iFrame-kaart. Klik op Publiceren of Opslaan om de kaart live te zetten op je website, en bekijk de pagina om te zien hoe het eruitziet.
Als dit niet overeenkomt met hoe jij pagina’s bewerkt in WordPress, bekijk dan hoe je HTML toevoegt met een van deze editors:
Optie 2: Installeer een speciale WordPress-kaartplug-in
Vergeleken met Optie 1 biedt een speciale WordPress-plug-in meer aanpassingsmogelijkheden en functionaliteit. Je installeert de plug-in op je site op dezelfde manier als elke andere plug-in, maakt een Google Maps API-sleutel aan, plakt deze in de instellingen en voegt vervolgens het kaartelement toe aan een pagina.
Deze optie brengt wat meer complexiteit met zich mee. Om de Google Maps API-sleutel te verkrijgen, moet je een account aanmaken in Google Cloud Platform, een factureringsaccount instellen en een technisch installatieproces doorlopen. Daarnaast werken de kaartplug-ins op freemium-basis: ze bieden een degelijk gratis abonnement met basisfuncties, maar de beste mogelijkheden zitten achter een eenmalige licentie of een jaarlijks abonnement.
Je voegt een extra plug-in toe, dus test de snelheid van je website nadat je de installatie hebt afgerond. Als je je site host op een goedkoop abonnement, kunnen te veel plug-ins alles aanzienlijk vertragen, wat de gebruikerservaring beïnvloedt en er mogelijk voor zorgt dat bezoekers afhaken.
Of de kaart goed werkt voor mobiele gebruikers hangt af van de plug-in en hoe je deze configureert. WP Go Maps raadt bijvoorbeeld aan om specifieke hoogte- en breedtewaarden in te stellen om een te krappe weergave te voorkomen.
Een WordPress-kaartplug-in instellen
Voor dit voorbeeld gebruik ik een van de populairste Google Maps-plug-ins voor WordPress, WP Go Maps.
WP Go Maps instellen
- Installeer en activeer WP Go Maps.
- Klik op Introductie overslaan om de installatie af te ronden.
- Klik op Instellingen in het menu aan de linkerkant.
- Selecteer op het tabblad Algemeen Google Maps als kaartengine.
Je Google Maps API-sleutel ophalen
Om de kaartgegevens van het Google-platform op te halen, moet je eerst een account registreren om je API-sleutel te verkrijgen.
- Ga naar de Google Maps Platform-website en maak een account aan.
- Je wordt naar een configuratieproces in het Google Cloud Platform geleid. Maak een nieuw factureringsaccount aan door een naam, land en valuta in te stellen.
- Voeg je contactgegevens en betaalmethode toe. Klik als je klaar bent op de knop Verzenden en facturering inschakelen.
Met deze optie krijg je 10.000 gratis kaartweergaven per maand; als je daaroverheen gaat, betaal je $7 per 1.000. Zolang je onder de limiet blijft, wordt er niets van je kaart afgeschreven, maar het factureringsaccount is hoe dan ook vereist. (In maart 2025 verving Google het oude maandelijkse tegoed van $200 door een apart gratis quotum per API; veel oudere tutorials verwijzen nog naar dit tegoed, maar het bestaat niet meer.)
- Google stelt je een paar vragen over hoe je van plan bent de Maps-service te gebruiken. Beantwoord ze en klik op Verzenden.
- Klik op Sleutels en inloggegevens in het menu aan de linkerkant.
- Klik op het dropdownmenu Inloggegevens aanmaken en vervolgens op API-sleutel.
- In het venster dat verschijnt, kun je de naam en machtigingen van je nieuwe API-sleutel instellen. Je hoeft deze instellingen niet te wijzigen; scroll helemaal naar beneden en klik op Aanmaken.
- Kopieer de API-sleutel.
Het is belangrijk om je sleutel te beperken voordat je site live gaat. Een onbeperkte sleutel in de broncode van je pagina kan worden gekopieerd en misbruikt, waardoor je factuur kan oplopen. Volg de best practices voor API-sleutels van Google om de sleutel te koppelen aan je domein.
De plug-in in WordPress verder instellen
- Ga terug naar de instellingenpagina van de WP Go Maps-plug-in in je WordPress-installatie en plak de API-sleutel in het veld Google Maps API Key. Klik daarna op de knop Instellingen opslaan.
- Klik op Kaarten in het menu aan de linkerkant.
- De plug-in heeft al een eerste kaart voor je aangemaakt. Klik op de knop Bewerken om deze te bekijken.
- Hier configureer je hoe je kaart op je website wordt weergegeven. Klik op het tabblad Markeringen om je bedrijf toe te voegen.
- Klik op het menu met de drie puntjes en verwijder de vooraf ingestelde kaartmarkering.
- Klik bovenaan op Markering toevoegen.
- Zoek het adres van je bedrijf op en selecteer het zodra het in de lijst verschijnt.
- Klik op de knop Markering toevoegen om af te ronden.
- Je bedrijf is nu op de kaart gemarkeerd. Je kunt het zoomniveau en andere visuele instellingen aanpassen door terug te gaan en op de knop Instellingen te klikken. Vergeet niet om onderaan het scherm op Kaart opslaan te klikken als je klaar bent.
- Wanneer je klaar bent om je kaart op een pagina van je website te plaatsen, klik je linksonder op de knop Shortcode ophalen. Hiermee wordt de shortcode naar je klembord gekopieerd.
- Ga naar de pagina waar je je kaart wilt toevoegen, klik om een nieuw blok toe te voegen en typ Shortcode om de opties te filteren. Klik erop zodra het verschijnt.
- Plak de shortcode in het invoerveld en klik op Publiceren of Opslaan.
- Wanneer je de pagina bezoekt, toont de kaart je markering met de instellingen die je hebt geselecteerd.
Optie 3: Voeg een gratis, aanpasbare Google Maps-widget toe (aanbevolen)
De Jotform Google Maps-widget is een gratis en volledig aanpasbare kaart waarvoor je geen plug-in hoeft te installeren en geen licentiekosten hoeft te betalen. Hiermee kun je
- Eén of meerdere locaties toevoegen die op dezelfde kaart worden weergegeven.
- De kaartweergave kiezen, waaronder wegenkaart of satelliet.
- Een licht of donker thema toepassen, met hoekradiusregeling voor vakken.
- De grootte, lay-out en het zoomniveau van de kaart instellen.
Vergeleken met standaard iFrames is de widget aanpasbaar, maakt het mogelijk om meerdere pins op dezelfde kaart te plaatsen en is hij standaard responsief. Vergeleken met een plug-in belast hij je website niet en heb je geen betaald abonnement nodig om alle functies te ontgrendelen.
Ondanks deze voordelen vereist de Jotform Google Maps-widget nog steeds een Google Maps API-sleutel. Je moet de installatiestappen doorlopen en een factureringsaccount aanmaken bij Google.
De Jotform Google Maps-widget toevoegen aan je website
- Ga naar de Jotform Google Maps-widgetpagina. In de meeste gevallen wordt de configuratietool automatisch geladen; als dat niet gebeurt, klik je op Nieuwe websitewidget maken om te beginnen.
- Volg deze handleiding over het verkrijgen van je Google Maps API-sleutel. Hierin worden alle stappen uit Optie 2 behandeld, evenals hoe je je sleutel kunt beperken om deze veilig te houden. (Onthoud dat Google Maps elke maand 10.000 gratis kaartweergaven toestaat. Elke 1.000 weergaven daarna kosten $7.) Plak je Google Maps API-sleutel in het invoerveld zodra je klaar bent.
- Pas de algemene instellingen naar wens aan. Dit omvat hoe de kaart eruit moet zien en hoeveel locaties je eraan wilt toevoegen. De schermafbeeldingen hier gebruiken de kantoren van Jotform in San Francisco en Canada om een kaart met meerdere pins te tonen, maar je kunt één locatie toevoegen of zoveel als je nodig hebt. Klik op Doorgaan als je klaar bent.
- Wijzig stijlinstellingen zoals thema, lettertype of aangepaste CSS. Klik op Doorgaan als je klaar bent.
- Pas de lay-out en extra functies aan in deze laatste stap. Klik op Probeer het gratis op je website wanneer je klaar bent.
- Maak een gratis Jotform-account aan of log in op een bestaand account. De insluitcode verschijnt nadat je bent ingelogd. Klik op Code kopiëren.
- Voeg de insluitcode toe aan je pagina met een aangepast HTML-blok door stappen 7–11 van Optie 1 te volgen: voeg het blok in, plak de code en klik op Publiceren of Opslaan.
- Open de pagina op je telefoon. In tegenstelling tot het standaard iFrame uit Optie 1 past de widget zich automatisch aan het scherm aan, waardoor de kaart die op mobiel werd afgesneden hier volledig wordt weergegeven.
Laat je WordPress-site groeien met slimme, serverloze widgets
Het inbouwen van slimme functies in je website betekent meestal betalen voor nieuwe plug-ins of worstelen met code. Jotform helpt je dat allemaal over te slaan: naast de Google Maps-widget biedt de Jotform websitewidgets-directory meer dan 150 gratis, no-code widgets die je configureert door simpelweg een HTML-snippet op je website te plakken.
Deze opties passen goed bij de Maps-widget:
- Openingstijden-widget: Deze widget toont openingstijden, inclusief een live open- of geslotenmelding die je naast je kaart kunt plaatsen, zodat bezoekers die je op de kaart vinden direct weten of je open bent. Geen API-sleutel vereist.
- Afspraakboekingswidget: Voeg een boekingsfunctie toe aan je website zodat mensen een afspraak met je kunnen inplannen. Deze widget ondersteunt het toevoegen van beschikbaarheid, het vermelden van je servicetypes met duur en prijzen, en het accepteren van reserveringen zonder dat je een extra tool nodig hebt.
- FAQ-widget: Deze widget toont antwoorden op veelgestelde vragen in een doorzoekbare accordion. Hetzelfde doen in WordPress is eenvoudig, maar de gepolijste ervaring die deze widget biedt zou betekenen dat je met code moet werken of weer een extra plug-in moet installeren.
Als je een instap-hostingplan voor WordPress hebt, verbruiken plug-ins essentiële serverbronnen, waardoor je website trager wordt en je bezoekers een slechte gebruikerservaring krijgen. De widgets van Jotform draaien op de infrastructuur van Jotform, zodat de belasting niet door jouw website wordt afgehandeld. Dit maakt serverbronnen vrij, waardoor je website sneller en gebruiksvriendelijker wordt.
Wil je je WordPress-site naar een hoger niveau tillen? Bekijk dan
- Onze gids Hoe WordPress te gebruiken om te leren hoe je een professionele website bouwt zonder te investeren in een webdesigncursus
- De WordPress-integratie van Jotform, die je gegevensverzameling stroomlijnt met automatisering, betalingen en geavanceerde functies in één platform
Veelgestelde vragen
Ja, het kan je website vertragen. Een interactieve Google Map laadt een grote hoeveelheid JavaScript, variërend van 100 KB tot 2 MB. In een onafhankelijke test kostte een enkele insluiting 14 procent aan paginasnelheidsscore, waardoor de tijd totdat de website klaar was voor interactie met 6,5 seconden toenam. Om vertragingen te voorkomen, laad je het script van de kaart alleen op de pagina die het gebruikt, lazy-load je het iFrame, of voeg je een klik-om-te-laden plaatshouderafbeelding toe.
Ja, maar niet met de standaard iFrame-insluiting. Voor meerdere markeringen maak je een kaart aan in Google My Maps: plaats je pins, stel de kaart in als openbaar, kopieer de insluitcode en plak deze op je website. Hoewel je zoveel pins kunt plaatsen als je wilt, kun je de kaart niet opmaken of aangepaste detailpanelen toevoegen. Als je meerdere pins én aanpassingsmogelijkheden wilt, doet de Jotform Google Maps-widget precies dat (je hebt alleen je Google Maps API-sleutel nodig).
Ja. Veel WordPress Google Maps plug-ins hebben bruikbare gratis versies die basiskaarten dekken, hoewel geavanceerde functies meestal voorbehouden zijn aan het betaalde abonnement. Als je liever geen plug-in installeert, zijn het standaard Google Maps iFrame en Google My Maps beide gratis. De Jotform Google Maps-widget is ook gratis te gebruiken en voegt aanpassingsmogelijkheden en kaarten met meerdere pins toe zonder de serverbelasting te verhogen, maar vereist wel een Google Maps API-sleutel.
Dit artikel is bedoeld voor WordPress-site-eigenaren, lokale bedrijven, makelaars en evenementenplanners die manieren willen vergelijken om een interactieve, mobielvriendelijke kaart toe te voegen met insluitingen, plug-ins of aanpasbare widgets.
Verstuur Opmerking: