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

Zoals veel dingen in WordPress, zijn er verschillende manieren waarop u Google Maps op uw site kunt insluiten, afhankelijk van wat voor soort kaartinhoud u wilt opnemen.

In dit bericht laten we u eerst zien hoe u Google Maps in WordPress kunt toevoegen zonder een plugin. Vervolgens zullen we een aantal plugins aanbevelen die u kunnen helpen Google Maps in te sluiten, evenals een aantal van de voordelen van die aanpak. We duiken ook in hoe de Google Maps API te gebruiken, die nu verplicht is.

Ten slotte zullen we eindigen met een aantal prestatie overwegingen voor het gebruik van Google Maps op WordPress en delen we een aantal tips over hoe je WordPress site snel te laden te houden, zelfs als je nodig hebt om Google Maps embedden.

U kunt hieronder klikken om direct naar een specifieke sectie te springen of lees gewoon door het hele ding.

• Google Maps API is nu vereist
• Hoe Google Maps in WordPress toe te voegen zonder plugin
• WordPress Google Maps plugins die u meer flexibiliteit geven
• Google Maps prestatie effect en tips om de prestaties te verbeteren

Google Maps API is nu vereist

Vanaf 11 juni, 2018, is een API sleutel nu vereist voor Google Maps. Als je Google Maps al op je site hebt geïmplementeerd en het werkt niet meer, kan dit de reden zijn. Of beter gezegd, je mist de API-sleutel. Het goede nieuws is, voor 99% van u, zou het nog steeds gratis moeten zijn. Hieronder vindt u de Google Maps API prijzen.

Google geeft u ook elke maand een terugkerend krediet van $200 op uw factureringsaccount om uw gebruikskosten te compenseren. Dus zoals u kunt zien, tenzij u duizenden verzoeken genereert, zou het gebruik van Google Maps op uw site u niets mogen kosten.

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

1. Teken in op een Google Cloud Platform Console-account en configureer het.
2. Voeg uw factureringsinfo toe, ook al wordt u misschien nooit gefactureerd.
3. Voeg de API-sleutel toe aan je Google Maps embed code of plugin-instellingen.

Hoe krijg ik een Google Maps API-sleutel

Hieronder staan stappen voor het verkrijgen van je Google Maps API-sleutel.

Step 1

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

Stap 2

Selecteer of maak een project.

Stap 3

Stel uw factureringsaccount in. Hoewel ze u vragen om een creditcard in te voeren, zou u nooit moeten worden belast, tenzij u de hoge gebruikslimieten overschrijdt.

Stap 4

U wordt gevraagd om een of meer producten te kiezen. Dit hangt af van het type kaart dat u gebruikt. Bijvoorbeeld, als u een kaart op uw WordPress site insluit zonder een plugin (zoals in de stappen hieronder), dan kiest u de Google Maps Embed API.

Als u een plugin zoals Google Maps Widget gebruikt (zoals in de stappen hieronder wordt getoond), dan kiest u de Google Maps Static API.

Als je een plugin of thema van een derde partij gebruikt, dan zouden zij documentatie moeten hebben over welk type Google Maps implementatie ze gebruiken. Maak je geen zorgen, je kunt altijd meerdere types toevoegen en deze later wijzigen.

Stap 5

Klik op “Inschakelen.”

Stap 6

Klik op “API’s” en vervolgens onder “Credentials”, ziet u uw API-sleutel.

Stap 7

Als u uw Google Maps API sleutel gewoon insluit, wordt deze in platte tekst in uw broncode weergegeven. Daarom moet u dit beperken, anders kunnen mensen uw API-sleutel gebruiken op hun WordPress-site of projecten en uw gebruik opdrijven.

Om dit te doen, klikt u op de naam van uw API-sleutel en het zal u toelaten om een beperking toe te voegen. Voor uw WordPress site zou het toevoegen van een HTTP referrer voldoende moeten zijn. Zoals https://yourdomain.com/*. Dit zal het toestaan om alleen oproepen op uw website te maken.

Hoe voeg je Google Maps toe in WordPress zonder plugin

Als je alleen een eenvoudige kaart wilt insluiten en geen meer gedetailleerde functionaliteit nodig hebt zoals aangepaste locatie markers of andere annotaties, kunt u Google Maps insluiten zonder een plugin met behulp van de normale Google Maps website die u dagelijks gebruikt.

Hier leest u hoe het werkt…

Stap 1: Kopieer de Google Maps Embed Code

Om te beginnen gebruikt u de Google Maps website om de kaart te maken die u wilt insluiten.

Bijv. als u een plaatsmarkering wilt insluiten, opent u die plaats in Google Maps. Of, als u een routebeschrijving wilt insluiten, opent u de routebeschrijving in Google Maps.

Als u eenmaal de kaart hebt die u wilt insluiten, klikt u op het hamburgermenu in de linkerbovenhoek:

In de lijst met menu-items selecteert u de optie voor Delen of Kaart insluiten:

Daarmee opent u een popup voor delen. Klik in die pop-up op het tabblad Een kaart insluiten.

Daarna kunt u de gewenste grootte kiezen met behulp van de vervolgkeuzelijst. Voor de meeste WordPress-sites werkt de standaardgrootte goed, maar u kunt de kaart groter of kleiner maken als dat nodig is.

Als u dat hebt gedaan, klikt u op de knop Kopieer HTML om de insluitcode te kopiëren:

U moet dan uw API-sleutel in de code toevoegen. Dus uw code moet er ongeveer zo uitzien:

<iframe src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&parameters allowfullscreen></iframe>

Stap 2: Voeg Google Maps Embed Code toe aan WordPress Site

Nu hoeft u alleen nog maar die embed code aan uw WordPress site toe te voegen in de post of pagina waar u uw kaart wilt opnemen.

Als je de nieuwe WordPress Gutenberg blok editor gebruikt die met WordPress 5.0 is uitgebracht, kun je dat doen door een Custom HTML blok toe te voegen en de embed code in het blok te plakken. Vergeet niet je API-sleutel toe te voegen.

Je kunt een voorbeeld bekijken hoe je kaart eruit komt te zien door op de knop Voorbeeld boven het blok te klikken.

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

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

En dat is het! Je hebt zojuist geleerd hoe je Google Maps in WordPress kunt toevoegen zonder plugin.

Gebruik Google Mijn Kaarten om meer gecompliceerde kaarten in te sluiten zonder plugin

Als je creatiever wilt worden als het gaat om zaken als meerdere locatie markers, aangepaste annotaties, etc., dan kun je dat nog steeds doen zonder de noodzaak van een plugin met Google’s Mijn Kaarten service.

Mijn Kaarten is een officiële tool van Google waarmee je je eigen aangepaste kaarten kunt maken en delen. Hiermee kunt u iets als het onderstaande voorbeeld maken, met veel aangepaste markeringen en aangepaste informatie die wordt weergegeven wanneer een gebruiker op een markering klikt:

Hier ziet u hoe u het kunt gebruiken om aangepaste Google Maps aan WordPress toe te voegen.

Abonneer je nu

Stap 1: Maak je kaart in Google Mijn Kaarten

Om te beginnen, ga je naar Google Mijn Kaarten en maak je een nieuwe kaart. Van daaruit kunt u de kaartbouwinterface gebruiken om uw kaart te bouwen:

Hoewel we er niet al te diep op ingaan, kunt u met deze interface behoorlijk creatieve kaarten bouwen. Voor een diepgaandere blik kunt u in dit Help-artikel van Google veel van de belangrijke functionaliteit vinden.

Stap 2: Genereer Embed Code

Als u klaar bent met het bouwen van uw kaart, moet u de embed-code genereren.

Voordat u die code kunt krijgen, moet u echter eerst uw kaart openbaar maken. Om dat te doen, klikt u op de knop Delen. Klik vervolgens op Wijzigen…in de popup:

Selecteer vervolgens Aan – Openbaar op het web en klik op Opslaan:

Als u dat hebt gedaan, klikt u op het vervolgkeuzemenu naast de titel van uw kaart en selecteert u Op mijn site insluiten om de eigenlijke insluitcode te genereren:

Daarna wordt een popup geopend met de code, die u moet kopiëren. Vergeet niet uw API-sleutel toe te voegen.

Stap 3: Embed Code toevoegen aan WordPress site

Nu kun je die embed code toevoegen aan je WordPress site, net zoals je dat zou doen met de embed code die je krijgt van de gewone Google Maps website.

Als u niet zeker weet hoe u dat moet doen, klik dan hier om naar dat gedeelte van de handleiding van hierboven te gaan.

Gebruik in plaats daarvan een WordPress Google Maps Plugin

Naast de handmatige methoden hierboven, zijn er ook tal van WordPress Google Maps plugins die u kunnen helpen kaarten op uw site in te sluiten.

Er zijn een paar redenen waarom u een van deze plugins zou kunnen overwegen boven de handmatige methoden:

• Ze laten u meer ingewikkelde kaarten maken met een eenvoudige interface.
• U kunt alles doen zonder dat u uw WordPress dashboard hoeft te verlaten.
• Sommige van hen linken naar WordPress. Je kunt bijvoorbeeld kaartmarkeringen koppelen aan WordPress-posts.
• Enkele van hen kunnen je helpen Google Maps te optimaliseren voor prestaties (hierover later meer).

Voor al deze plugins moet je je eigen Google Maps API Key genereren voordat je kunt beginnen met het insluiten van kaarten. Deze handleiding laat zien hoe je dat doet.

Google Maps Widget

Google Maps Widget is een eenvoudige Google Maps plugin waarmee u een kaart kunt insluiten met behulp van de Google Maps Static API, die een meer prestatie-vriendelijke aanpak biedt door het insluiten van een statische afbeelding in plaats van een interactieve kaart (we leggen hier meer over uit in de volgende sectie).

Het is een geweldige optie als u iets eenvoudigs en lichtgewichts wilt. Zodra u het activeert, moet u uw Google Maps API-sleutel te pakken en het in de instellingen van de plugin. U kunt een Google Map toevoegen aan elk widget gebied op uw site. Vervolgens kunnen bezoekers een grotere interactieve versie van de kaart in een lightbox openen:

U kunt een interactieve kaart desgewenst ook meteen gebruiken, en met de Pro-versie kunt u kaarten overal op uw site insluiten met een shortcode.

Google Maps Easy

Google Maps Easy helpt u aangepaste kaarten te maken met uw eigen markeringen en annotaties.

Wanneer u markeringen toevoegt, hebt u de mogelijkheid om uw eigen aangepaste pictogrammen te uploaden, tekst en afbeeldingen in de beschrijving van de markering op te nemen, en nog veel meer. U kunt ook bepalen hoe uw kaart functioneert, bijvoorbeeld of gebruikers wel of niet mogen inzoomen:

Als u uw kaart eenmaal hebt gemaakt, kunt u deze insluiten met behulp van een shortcode of PHP-functie.

Intergeo

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

Als u de plugin eenmaal hebt geïnstalleerd en geactiveerd, kunt u uw kaarten rechtstreeks vanuit uw WordPress-dashboard maken:

Daarna kunt u ze overal op uw site invoegen met behulp van een shortcode.

Gutenberg Block For Google Maps Embed

Gutenberg Block For Google Maps Embed is een eenvoudige plugin die een speciaal Google Maps blok toevoegt aan de nieuwe WordPress Gutenberg blok editor.

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

• Afmetingen
• Zoom niveau
• Interactieve kaart vs statische kaart (nogmaals, de laatste methode helpt bij de prestaties)

Het laat je niet je eigen aangepaste kaarten maken – maar het is een handige optie als je de nieuwe blok editor gebruikt en gewoon een gemakkelijke manier wilt om een aantal eenvoudige kaarten op te nemen.

Google Maps kan uw WordPress site vertragen – laat het niet

Met Google Maps kunt u veel coole functionaliteit op uw site zetten met interactieve kaarten, maar de prestaties gaan er wel op achteruit, omdat er een groot aantal scripts moet worden geladen om al die interactieve functionaliteit mogelijk te maken.

Lang verhaal kort, interactieve Google Maps insluiten kan uw site vertragen.

Er zijn een paar manieren waarop u dit kunt tegengaan.

Eerst, als je niet wilt dat mensen interactief door je kaart kunnen bladeren op je website, is een eenvoudige manier om dingen te versnellen zonder third-party tools:

• Maak een screenshot van de kaart om op je site te gebruiken
• Link dat screenshot naar de kaart op de Google Maps website, of open een lightbox popup met de interactieve kaart wanneer een gebruiker klikt.

Op die manier laadt uw site gewoon een gewone afbeelding – niet alle scripts die bij Google Maps horen.

Als alternatief voor dit handmatig doen, kunt u ook de gratis AWEOS Google Maps iframe load per click plugin gebruiken. Deze plugin vervangt automatisch Google Maps embeds met een generieke placeholder afbeelding. Als een gebruiker vervolgens op de knop Kaart laden klikt, wordt de volledige Google Maps embed geladen:

Of u kunt ook de Google Maps Static API gebruiken, die een gewone afbeelding retourneert zonder JavaScript. Sommige Google Maps plugins – inclusief Google Maps Widget en Gutenberg Block For Google Maps Embed – laten u de Static API gebruiken wanneer u uw kaarten maakt.

We realiseren ons echter dat deze statische benadering soms gewoon niet genoeg is, en veel mensen willen de interactieve Google Maps ervaring meteen insluiten.

In dat geval is een andere goede manier om Google Maps te versnellen het gebruik van lazy loading. Met lazy loading wacht uw site met het laden van Google Maps-insluitingen onder de pagina totdat bezoekers naar beneden scrollen. Zo blijft de laadtijd van uw pagina snel, terwijl u toch interactieve Google Maps-inhoud kunt opnemen.

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

Er zijn een paar plugins waarmee u dit kunt doen. Met de a3 Lazy Load plugin kun je bijvoorbeeld iframe embeds lazy laden, waaronder Google Maps:

Andere opties zijn:

• BJ Lazy Load
• Lazy Load by WP Rocket
• Easy Lazy Loader

Samenvatting

Als je gewoon een eenvoudige kaart op je site wilt insluiten, kun je Google Maps zonder plugin aan WordPress toevoegen met behulp van de ingebouwde embed code functie. Of u kunt de Google My Maps tool gebruiken om uw eigen aangepaste kaart te maken en die in te sluiten.

Naast deze handmatige methoden, zijn er ook tal van Google Maps WordPress plugins die u veel controle kunnen geven zonder dat u uw WordPress dashboard hoeft te verlaten.

Welke methode u ook kiest, let op de prestatie-impact van het gebruik van Google Maps. Probeer Google Maps alleen te gebruiken als het echt nodig is en overweeg tactieken zoals placeholder afbeeldingen of lazy loading om het negatieve effect op de performance te verminderen.

Heeft u nog andere vragen over het gebruik van Google Maps op WordPress? Laat het ons weten in de comments!