Op zoek naar een manier om WordPress Google Maps in te sluiten op je site?

Zoals bij zoveel dingen in WordPress, zijn er verschillende manieren waarop men Google Maps kan insluiten – dit wordt ook wel embedden genoemd –  op een site, afhankelijk van het soort kaart dat je wilt opnemen.

In dit artikel laten we je eerst zien hoe je Google Maps kunt toevoegen in WordPress zonder gebruik te maken van een plug-in. Vervolgens zullen we enkele plug-ins aanbevelen die je kunnen helpen bij het insluiten van Google Maps, evenals enkele voordelen van deze aanpak. We zullen ook ingaan op hoe de Google Maps API correct te gebruiken, wat nu een vereiste is.

Tenslotte eindigen we met enkele prestatieoverwegingen voor het gebruik van Google Maps op WordPress en delen we ook enkele tips over hoe je een WordPress-site snel kunt laten laden, zelfs wanneer je Google Maps moet insluiten.

Je kunt hieronder klikken om direct naar een specifieke sectie te gaan of gewoon de hele tekst doorlezen.

Google Maps API is tegenwoordig een vereiste

Vanaf 11 juni 2018 wordt er voor Google Maps een API-sleutel vereist. Als je Google Maps al op je site hebt toegevoegd en deze blijkt niet meer te werken, dan is dit waarschijnlijk de reden. Beter gezegd, je mist de API-sleutel. Het goede nieuws is dat het voor 99% van de gebruikers nog steeds gratis zou moeten zijn. Hieronder vindt je de Google Maps API-prijzen.

Google Maps API-prijzen

Google Maps API-prijzen

Google geeft je ook elke maand een terugkerend tegoed van $200 op je rekening om de gebruikskosten te compenseren. Zoals je kunt zien, zou het gebruik van Google Maps op je site je niets moeten kosten, tenzij je duizenden verzoeken genereert.

Wat is er nog meer veranderd? Eigenlijk niets, maar je moet nu het volgende doen als je Google Maps in WordPress wilt gebruiken:

  1. Meld je aan voor een Google Cloud Platform Console-account en configureer het.
  2. Voeg je factuurgegevens toe, ook al word je misschien nooit gefactureerd.
  3. Voeg de API-sleutel toe aan je Google Maps-insluitcode of plug-in-instellingen.

Een Google Maps API-sleutel verkrijgen

Hieronder vind je de stappen voor het verkrijgen van een Google Maps API-sleutel.

Stap 1

Ga naar de Google Cloud Platform-console. Als je nog geen account hebt, maak er dan een aan, het is gratis.

Stap 2

Selecteer of maak een project aan.

Stap 3

Stel je factureringsrekening in. Een vereiste hiervoor is het opslaan van een creditcard in het bestand, hoewel je (waarschijnlijk) nooit zal worden belast, tenzij je de hoge gebruikslimieten overschrijdt.

Stap 4

Je wordt gevraagd om een of meer producten te kiezen. Dit is afhankelijk van het type kaart dat je gebruikt. Als je bijvoorbeeld een kaart op je WordPress-site insluit zonder een plug-in (zoals getoond in de stappen hieronder), kies je de Google Maps Embed API.

Google Maps Embed API

Google Maps Embed API

Als je een plug-in of thema van derden gebruikt, moeten ze documentatie hebben over welk type Google Maps-implementatie ze gebruiken.

Maak je hierover niet druk, je kunt altijd meerdere typen toevoegen en deze later wijzigen.

Stap 5

Klik op ‘Enable’.

Schakel Google Maps API in

Schakel Google Maps API in

Stap 6

Klik op “APIs” en vervolgens onder “Credentials”. Je ziet nu de API-sleutel.

Google Maps API key

Google Maps API key

Stap 7

Als je enkel de Google Maps API-sleutel insluit, wordt deze in niet-gecodeerde tekst weergegeven in je broncode. Om te voorkomen dat iemand je API-sleutel op zijn of haar  WordPress-site of -projecten gebruikt — dit zou je eigen verbruik verkorten— moet je dit zoveel mogelijk beperken.

Klik hiervoor op de naam van je API-sleutel, zodat je een beperking kunt toevoegen. Een HTTP-verwijzer op je WordPress-site toe voegen zou hiervoor genoeg moeten zijn. Bijvoorbeeld: https://uwdomein.com/*. Op deze manier kan het alleen via je website worden gebruikt.

Google Maps API-sleutelbeperking

Google Maps API-sleutelbeperking

Google Maps zonder een plug-in toevoegen in WordPress

Als je alleen een eenvoudige kaart wilt insluiten en geen meer gedetailleerde werking nodig hebt, zoals bijvoorbeeld aangepaste locatiemarkeringen of andere aantekeningen, kun je Google Maps insluiten zonder een plug-in met de normale Google Maps-website.

Zo werkt het…

Stap 1: Kopieer de Google Maps-insluitcode

Gebruik om te beginnen de Google Maps-website om de kaart die je wilt insluiten aan te maken.

Als je bijvoorbeeld een plaatsmarkering wilt insluiten, open je die plaats in Google Maps. Of open de routebeschrijving in Google Maps als je een routebeschrijving wilt insluiten.

Zodra je de kaart hebt die je wilt insluiten, klik je op het hamburgermenu in de linkerbovenhoek:

Hoe krijg je toegang tot de insluitcode

Hoe krijg je toegang tot de insluitcode

Selecteer in de lijst met menu-items de optie Share or embed map:

Open de insluitopties

Open de insluitopties

Dat opent een Share-pop-up. Klik in die pop-up op het tabblad Embed a map.

Vervolgens kun je de gewenste grootte kiezen met behulp van de vervolgkeuzelijst. Voor de meeste WordPress-sites werkt het standaardformaat goed, maar je kunt de kaart desgewenst groter of kleiner maken.

Zodra je dat hebt gedaan, klik je op de knop Copy HTML om de insluitcode te kopiëren:

De Google Maps-insluitcode

De Google Maps-insluitcode

Je moet dan je API-sleutel toevoegen aan de code. De code zou er ongeveer zo uit moeten zien:

YOUR_API_KEY&parameters allowfullscreen>

Stap 2: Google Maps insluitcode toevoegen aan WordPress-site

Nu hoef je alleen die insluitcode toe te voegen aan de WordPress-site in het artikel of pagina waar je de kaart wilt opnemen.

Als je de nieuwe WordPress Gutenberg-blokeditor gebruikt die is uitgebracht met WordPress 5.0, kun je dat doen door een aangepast HTLM-blok toe te voegen en de insluitcode in het blok te plakken. Vergeet niet de API-sleutel toe te voegen.

Hoe voeg je de insluitcode toe in de WordPress-blokeditor

Hoe voeg je de insluitcode toe in de WordPress-blokeditor

Je kunt een voorbeeld bekijken van hoe de kaart eruit zal zien door op de knop Preview boven het blok te klikken.

Als je nog steeds de klassieke TinyMCE-editor gebruikt, kun je de Google Maps-insluitcode toevoegen door het tabblad Text te openen en de code daar te plakken:

Insluitcode voegen in de WordPress-blokeditor

Insluitcode voegen in de WordPress-blokeditor

Nadat je de code hebt toegevoegd, kun je teruggaan naar het tabblad Visual om een live voorbeeld van je kaart te bekijken.

Dat is alles! Je weet nu hoe je Google Maps toevoegt in WordPress zonder een plug-in.

Gebruik Google My Maps om ingewikkeldere kaarten in te sluiten zonder een plug-in

Als je creatiever wilt worden als het gaat om meerdere locatiemarkeringen, aangepaste aantekeningen, enz., kun je dat nog steeds doen zonder een plug-in met de My Maps-service van Google.

My Maps is een officieel hulpprogramma van Google waarmee je je eigen aangepaste kaarten kunt maken en delen. Hiermee kun je zoiets als in het onderstaande voorbeeld maken, met veel aangepaste markeringen en aangepaste informatie die wordt weergegeven wanneer een gebruiker op een markering klikt:

Voorbeeld Google My Maps

Voorbeeld Google My Maps

Zo wordt het gebruikt om aangepaste Google Maps toe te voegen aan WordPress.

Stap 1: Maak een kaart in Google My Maps

Ga om te beginnen naar Google My Maps en maak een nieuwe kaart. Om een kaart te maken, maak je daar gebruik van de map builder-interface:

De Google My Maps-interface

De Google My Maps-interface

Hoewel we het niet te gedetailleerd zullen behandelen, kun je met deze interface een aantal mooie creatieve kaarten maken. Wil je er dieper op ingaan, dan behandelt dit Help-artikel van Google veel belangrijke functies.

Stap 2: Genereer insluitcode

Als je klaar bent met het maken van de kaart, moet je de insluitcode genereren.

Voordat je die code kunt krijgen, moet je echter eerst de kaart openbaar maken. Klik hiervoor op de knop Share. Klik vervolgens op Change… in de pop-up:

Instellingen voor het delen van Google My Maps

Instellingen voor het delen van Google My Maps

Selecteer vervolgens On – Public on the web en klik op Save:

Schakel Link Sharing in

Schakel Link Sharing in

Zodra je dat hebt gedaan, klik je op het vervolgkeuzemenu bij de titel van de kaart en selecteer je Embed on my site om de daadwerkelijke insluitcode te genereren:

Open de insluitcode van My Maps

Open de insluitcode van My Maps

Dat opent een pop-up met de code, die je moet kopiëren. Vergeet niet de API-sleutel toe te voegen.

Insluitcode van My Maps

Insluitcode van My Maps

Stap 3: voeg insluitcode toe aan WordPress-site

Nu kun je die insluitcode toevoegen aan de WordPress-site, op dezelfde manier als wanneer je de insluitcode zou hebben gekregen van de Google Maps-website.

Als je niet zeker weet hoe je dat moet doen, klik je hier om vanaf het begin naar dat gedeelte van de zelfstudie te gaan.

Gebruik in plaats daarvan een WordPress Google Maps-plug-in

Naast deze handmatige methoden, zijn er ook talloze WordPress Google Maps-plug-ins die je kunnen helpen bij het insluiten van kaarten op je site.

Hier volgen enkele redenen waarom je één van deze plug-ins zou willen overwegen, in plaats van de handmatige methoden:

  • Je kunt ingewikkelder kaarten maken met een eenvoudige interface.
  • Je kunt alles doen zonder je WordPress-dashboard te verlaten.
  • Sommigen van hen linken naar WordPress. Je kunt bijvoorbeeld kaartmarkeringen koppelen aan WordPress-artikelen.
  • Sommigen kunnen je helpen Google Maps te verbeteren voor prestaties (later meer hierover).

Voordat je kunt beginnen met het insluiten van kaarten, moet je voor al deze plug-ins je eigen Google Maps API-sleutel genereren. In deze tutorial wordt uitgelegd hoe je dat doet.

Google Maps Widget

Google Maps Widget is een eenvoudige Google Maps-plug-in waarmee je een kaart kunt insluiten met behulp van de Google Maps Static API. Deze biedt een meer prestatievriendelijke aanpak door een statische afbeelding in te sluiten in plaats van een interactieve kaart (we zullen hierover meer uitleggen in de volgende sectie).

Het is een geweldige optie als je iets eenvoudigs en lichtgewicht wilt. Zodra je het activeert, moet je de Google Maps API-sleutel in de instellingen van de plug-in steken. Je kunt een Google Map toevoegen aan elk widgetgebied op je site. Zo kunnen bezoekers een grotere interactieve versie van de kaart in een lightbox openen:

De Google Maps Widget-interface

De Google Maps Widget-interface

Je kunt desgewenst ook direct een interactieve kaart gebruiken en met de Pro-versie kun je kaarten met een shortcode overal op je site insluiten.

Google Maps Easy

Met Google Maps Easy kun je aangepaste kaarten maken met je eigen markeringen en aantekeningen.

Wanneer je markeringen toevoegt, kun je je eigen aangepaste pictogrammen uploaden, tekst en afbeeldingen in de markeringsbeschrijving opnemen en nog veel meer. Je kunt ook bepalen hoe de kaart werkt, zoals bijvoorbeeld de gebruikers de keuze geven om in te zoomen:

Google Maps Easy-interface

Google Maps Easy-interface

Nadatje de kaart hebt gemaakt, kunt je deze insluiten met een shortcode of PHP-functie.

Intergeo

Intergeo is een andere populaire optie waarmee je je eigen kaarten met aangepaste markeringen kunt maken en controle over de kaartfunctionaliteit kunt hebben.

Nadat je de plug-in hebt geïnstalleerd en geactiveerd, kun je de kaarten rechtstreeks vanaf je WordPress-dashboard maken:

Intergeo-interface

Intergeo-interface

Vervolgens kun je ze overal op je site insluiten met behulp van een shortcode.

Gutenberg-blok voor Google Maps Embed

Gutenberg-blok voor Google Maps Embed is een eenvoudige plug-in die een speciaal Google Maps-blok toevoegt aan de nieuwe WordPress Gutenberg-blokeditor.

Met dit blok kun je elk adres insluiten en ook het kiezen van:

  • Afmetingen
  • Zoomniveau
  • Interactieve kaart versus statische kaart (nogmaals, deze laatste methode helpt bij de prestaties)

Het laat je niet toe om je eigen aangepaste kaarten te maken – maar het is een handige optie als je de nieuwe blokeditor gebruikt en gewoon een makkelijke manier wilt om enkele eenvoudige kaarten op te nemen.

Google Maps kan je WordPress-site vertragen – laat dat niet toe

Hoewel je met Google Maps en zijn interactieve kaarten een heleboel gave functies kunt insluiten op je site, kan dit invloed hebben op de prestaties van je site. Het moet immers een groot aantal scripts laden om al die interactieve functies te voeden.

Om het kort te houden, het insluiten van interactieve Google Maps kan de site vertragen.

Er zijn een paar manieren waarop je dit kunt tegengaan.

Ten eerste, als je het niet nodig vindt dat de gebruikers interactief door je kaart op je website kunnen bladeren, is dit een eenvoudige manier om dingen te versnellen zonder externe hulpmiddelen:

  • Maak een screenshot van de kaart om op je site te gebruiken
  • Koppel dat screenshot aan de kaart op de Google Maps-website of open een lightbox-pop-up met de interactieve kaart wanneer een gebruiker klikt.

Op deze manier laadt de site gewoon een normale afbeelding en niet alle scripts die aan Google Maps zijn gekoppeld.

Als alternatief voor deze handmatig manier, kun je ook de gratis  AWEOS Google Maps iframe load per click plug-in gebruiken. Deze plug-in vervangt automatisch Google Maps-insluitingen door een algemeen afbeelding voor tijdelijke aanduiding. Als een gebruiker vervolgens op de knop Load Map klikt, laadt deze de volledige Google Maps-insluiting:

Google Maps placeholder afbeelding

Google Maps placeholder afbeelding

Je kunt ook de statische API van Google Maps gebruiken, die een normale afbeelding zonder JavaScript retourneert. Met sommige Google Maps-plug-ins – waaronder Google Maps Widget en Gutenberg Block For Google Maps Embed –  kun je de Static API gebruiken bij het maken van de kaarten.

We beseffen echter dat deze statische aanpak soms niet voldoende is en veel mensen willen de interactieve Google Maps-ervaring meteen inbedden.

Als dat het geval is, is het gebruik van vertraagd laden een andere goede manier om Google Maps te versnellen. Bij vertraagd laden wacht de site om alle Google Maps-insluitingen onderaan de pagina te laden totdat bezoekers over de pagina beginnen te scrollen. Dat houdt de laadtijden van het eerste deel van de pagina laag, terwijl je toch interactieve Google Maps-inhoud kunt insluiten.

We hebben al geschreven over het vertraagd laden van afbeeldingen en video’s en het is hetzelfde idee voor Google Maps.

Er zijn een paar plug-ins waarmee je dit kunt doen. Met de a3 Lazy Load-plug-in kun je bijvoorbeeld iframe-insluitingen vertraagd laden, inclusief Google Maps:

Vertraagd Google Maps laden

Vertraagd Google Maps laden

Andere opties zijn:

Samenvatting

Als je alleen een eenvoudige kaart op je site wilt insluiten, kun je Google Maps zonder een plug-in toevoegen aan WordPress met behulp van de ingebouwde insluitcodefunctie. Je kunt ook eventueel de Google My Maps-tool gebruiken om je eigen aangepaste kaart te maken en die in te sluiten.

Naast deze handmatige methoden, zijn er ook veel Google Maps WordPress-plug-ins die je veel controle kunnen geven zonder dat je de WordPress-dashboard hoeft te verlaten.

Welke methode je ook kiest, hou rekening met de invloed van Google Maps op de prestaties. Probeer Google Maps alleen te gebruiken wanneer dit absoluut noodzakelijk is en overweeg tactieken zoals afbeeldingen van tijdelijke aanduidingen of vertraagd laden om het negatieve effect op de prestaties te verminderen.

Heb je nog andere vragen over het gebruik van Google Maps op WordPress? Laat het ons in de reacties weten!

10
Delen