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 plugin. Vervolgens zullen we enkele plugins 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
- Google Maps zonder een plugin toevoegen in WordPress
- WordPress Google Maps-plugins die meer flexibiliteit bieden
- Google Maps prestatie-effect en tips om de prestaties te verbeteren
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 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:
- Meld je aan voor een Google Cloud Platform Console-account en configureer het.
- Voeg je factuurgegevens toe, ook al word je misschien nooit gefactureerd.
- Voeg de API-sleutel toe aan je Google Maps-insluitcode of plugin-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 plugin (zoals getoond in de stappen hieronder), kies je de Google Maps Embed API.
Als je een plugin 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’.
Stap 6
Klik op “APIs” en vervolgens onder “Credentials”. Je ziet nu de API-sleutel.
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 zonder een plugin 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 plugin 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:
Selecteer in de lijst met menu-items de optie Share or embed map:
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:
Je moet dan je API-sleutel toevoegen aan de code. De code zou er ongeveer zo uit moeten zien:
YOUR_API_KEY¶meters 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.
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:
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 plugin.
Gebruik Google My Maps om ingewikkeldere kaarten in te sluiten zonder een plugin
Als je creatiever wilt worden als het gaat om meerdere locatiemarkeringen, aangepaste aantekeningen, enz., kun je dat nog steeds doen zonder een plugin 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:
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:
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:
Selecteer vervolgens On – Public on the web en klik op Save:
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:
Dat opent een pop-up met de code, die je moet kopiëren. Vergeet niet de API-sleutel toe te voegen.
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-plugin
Naast deze handmatige methoden, zijn er ook talloze WordPress Google Maps-plugins die je kunnen helpen bij het insluiten van kaarten op je site.
Hier volgen enkele redenen waarom je één van deze plugins 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 plugins 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-plugin 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 plugin 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:
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:
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 plugin hebt geïnstalleerd en geactiveerd, kun je de kaarten rechtstreeks vanaf je WordPress-dashboard maken:
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 plugin 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 plugin gebruiken. Deze plugin 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:
Je kunt ook de statische API van Google Maps gebruiken, die een normale afbeelding zonder JavaScript retourneert. Met sommige Google Maps-plugins – 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 plugins waarmee je dit kunt doen. Met de a3 Lazy Load-plugin kun je bijvoorbeeld iframe-insluitingen vertraagd laden, inclusief Google Maps:
Andere opties zijn:
Samenvatting
Als je alleen een eenvoudige kaart op je site wilt insluiten, kun je Google Maps zonder een plugin 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-plugins 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!
Brian heeft een enorme passie voor WordPress, gebruikt het al meer dan tien jaar en heeft zelfs al aantal premium plugins ontwikkeld. Brian houdt van bloggen, films en hikes. Kom in contact met Brian op Twitter.
Laat een reactie achter