Zoek jij naar een methode om Google Maps toe te voegen aan jouw WordPress website? Dan ben je hier op de juiste plek!
Zoals veel dingen in WordPress zijn er een hoop verschillende manieren hoe jij een bepaalde functionaliteit aan jouw website kunt toevoegen. Dit geldt ook voor het toevoegen van Google Maps in WordPress.
In deze handleiding ga ik jou dan ook laten zien hoe jij Google Maps kunt toevoegen zonder plugin, met behulp van een plugin en hoe je Google Maps kunt toevoegen via Elementor. Via de inhoudsopgave hieronder kun jij direct naar het juiste onderdeel navigeren.
Waarom moet je Google Maps in WordPress gebruiken?
Voordat ik je wil laten zien hoe jij Google Maps kunt toevoegen aan jouw WordPress website wil ik eerst even uitleggen waarom het slim kan zijn om Google Maps te gebruiken. Het is namelijk meer dan alleen een simpele toevoeging.
Online vindbaarheid is super belangrijk en al helemaal wanneer je je richt op de lokale markt. Google wilt namelijk de beste informatie geven aan hun bezoekers. Wanneer iemand dus bijvoorbeeld zoekt naar een fietsenmaker in Utrecht en dat ben jij toevallig zal jij beter gevonden worden in Google. Verder heeft het gebruik van Google Maps in WordPress ook nog een aantal andere voordelen:
- Recensies: De locatie van je bedrijf op Google Maps kun je linken aan de beoordeling van jouw bedrijf. Dit heeft potentiële klanten direct een goed beeld van de kwaliteit en service dat jouw bedrijf levert.
- Routebeschrijving: Google Maps op jouw website gebruiken is ook erg handig voor nieuwe klanten. Zij kunnen via Google Maps namelijk super eenvoudig een routebeschrijving naar jouw kantoor of winkel krijgen.
De Google Maps API is verplicht
Er is een belangrijk ding dat ik met je wil bespreken voordat ik je ga uitleggen hoe je Google Maps aan jouw website kunt toevoegen. Sinds 11 juni 2018 is een API-sleutel namelijk verplicht om gebruik te kunnen en mogen maken van Google Maps op jouw website.
Gebruik jij deze API koppeling niet? Dan zal Google Maps op jouw website niet werken. Om gebruik te maken van de Google Maps API kunnen kosten in rekening worden gebracht. Dit is afhankelijk van het aantal bezoekers dat jij op jouw website krijgt. Wanneer je Google Maps op de normale manier embed op jouw website blijft het helemaal gratis.
Google Maps API aanvragen
Om een Google Maps API sleutel te kunnen krijgen moet je je natuurlijk wel eerst aanmelden. Je kunt dan ook de volgende stappen volgen om de Google Maps API sleutel aan te vragen:
- Ga naar het Google Cloud Platform
- Login in met je Google Account
- Ga naar “Products” → “Maps embed”
- Klik op “Get Started”
- Klik op “Create billing account” & doorloop de stappen
- Haal je API sleutel op
Google Maps in WordPress toevoegen zonder plugin
1. Kopieer de embed code van Google Maps
Om deze code te krijgen kun je de volgende stappen volgen:
- Ga naar Google Maps
- Vul de gewenste locatie in
- Klik op het menu(Zie afbeelding hieronder)
- Klik op “Kaart delen of insluiten”
- Kies voor “Een kaart insluiten”
- Kies het gewenste formaat en kopieer de HTML code
2. Voeg de code toe aan een pagina of bericht
Nu je de code van Google Maps hebt ingesloten wil je deze natuurlijk toevoegen aan een pagina of bericht in WordPress. Om dit te doen kun je de volgende stappen volgen:
- Login op jouw WordPress website
- Ga naar de gewenste pagina of bericht
- Plaats de code in de editor
- Klik op “Updaten”
Voor stap 3 is het afhankelijk van het type editor dat jij gebruikt. Maak jij gebruik van de gutenberg editor? Dan moet je het Custom HTML block toevoegen. Maak je gebruik van de classic editor in WordPress? Dan kun je de editor op “Tekst” zetten in plaats van “Visueel”. Hier kun je vervolgens de code op de gewenste locatie zetten(zie afbeelding).
Google Maps in WordPress toevoegen met een plugin
1. Installeer de MapPress Maps plugin
Voordat je Google Maps kunt toevoegen aan jouw WordPress website moet je als eerst een plugin toevoegen. In dit geval raad ik je aan om gebruik te maken van de Google MapPress Maps plugin.
Je kunt deze plugin installeren door de volgende stappen te volgen:
- Login op jouw WordPress website
- Navigeer naar “Plugins” → “Nieuwe toevoegen”
- Zoek naar “MapPress”
- Installeer & activeer de MapPress plugin van Chris Richardson
- Kies voor Google Maps
- Vul je API sleutel in & volg de stappen
2. Gebruik het element op de pagina waar jij maps wilt gebruiken
Wanneer het je is gelukt om de MapPress plugin te installeren en te koppelen aan jouw Google Maps API sleutel is het tijd om de kaart toe te voegen aan jouw WordPress website. Hiervoor kun je de volgende stappen volgen.
- Ga naar de gewenste pagina of bericht
- Klik op “+” en zoek naar “MapPress”
- Klik op “Kaart rand”
- Klik op “Add new”
- Voer het adres van je bedrijf in
- Klik op “Wijzigingen opslaan”
- Beweeg met de muis over de kaart en klik op “Insert into post”
- Sla de pagina op
Google maps in WordPress toevoegen met Elementor
Elementor is samen met Divi een van de populairste en meest gebruiksvriendelijke page builders van dit moment. Een Elementor website maken is dan ook een super slimme zet en in dit geval heb je ook nog eens gelukt, want Elementor beschikt standaard al over een Google Maps widget.
Werk jij nog niet met Elementor? Dan kun je er ook voor kiezen om eens met Elementor te proberen werken. Een WordPress website maken met deze page builder is namelijk super eenvoudig. Je kunt hier lezen hoe je Elementor kunt downloaden en installeren.
1. Stel de Google Maps API in
Ook wanneer je Google Maps wilt gebruiken in Elementor moet je eerst de koppeling maken met de API sleutel. Dit kun je eenvoudig doen door de volgende stappen te volgen:
- Login op jouw WordPress website
- Ga onder “Elementor” naar “Instellingen”
- Klik op “Integraties”
- Vul bij Google Maps Embed API jouw unieke API sleutel in
- Scroll naar beneden & klik op wijzigingen opslaan
2. Voeg de Maps widget in Elementor toe aan de pagina
Wanneer het je is gelukt om de API koppeling met Elementor te maken kun jij de Google Maps widget in Elementor gebruiken. Je kunt hiervoor de volgende stappen volgen:
- Ga naar de pagina of het bericht dat jij wilt bewerken
- Klik op “Bewerk met Elementor”
- Zoek naar de Maps widget
- Sleep de widget naar de juiste plek
- Voor de locatie in
- Stel de widget naar wens in
- Klik op “Updaten”
Kun je Google Maps in de footer gebruiken?
Een vraag die ik de laatste tijd veel heb gekregen is of je Google Maps ook in de footer van jouw website of webshop kunt gebruiken. Ik wil je hier nu dan ook even antwoord op geven.
Ja, het is mogelijk om Google Maps in de footer van jouw website te gebruiken. Hoe dit precies werkt is alleen wel afhankelijk van het WordPress thema dat jij gebruikt en hoe de footer van dit thema staat ingesteld.
Persoonlijk zal ik je aanraden om je footer met Elementor te maken, omdat je hier direct gebruik kunt maken van de Elementor Google Maps widget. Werk je niet met Elementor? Dan kun je Google Maps het beste aan de footer van jouw website toevoegen door dit handmatig te doen met behulp van een widget. Hiervoor kun je gebruik maken van methode 1 in dit artikel.
Kun jij Google Maps zelf toevoegen in WordPress?
Nu we zijn aangekomen aan het eind van dit artikel is het tijd voor een conclusie, want kun jij nu zelf Google Maps aan jouw WordPress website toevoegen?
Ja, ik ben er zeker van overtuigd dat jij een Google Maps kaart aan jouw website kunt toevoegen. Het is namelijk helemaal niet zo lastig, maar je hebt wel even de API key nodig om gebruik te kunnen en mogen maken van Google Maps.
Vind je het spannend om hiermee aan de slag te gaan? Dan kan ik je zeker aanraden om eerst een WordPress backup te maken.
