Wordpress

WordPress Google Maps-handleiding: insluiten met of zonder plug-in

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 het type kaartinhoud dat u wilt opnemen.

In dit bericht laten we u eerst zien hoe u Google Maps kunt toevoegen in WordPress zonder plug-in. Vervolgens zullen we enkele plug-ins aanbevelen die: wel helpen u Google Maps in te sluiten, evenals enkele voordelen van die aanpak. We zullen ook ingaan op het juiste gebruik van de Google Maps API, die nu vereist is.

Ten slotte eindigen we met enkele prestatie-overwegingen voor het gebruik van Google Maps op WordPress en delen we enkele tips over hoe u ervoor kunt zorgen dat uw WordPress-site snel laadt, zelfs als u Google Maps moet insluiten.

U kunt hieronder klikken om direct naar een specifieke sectie te gaan of gewoon het hele ding doorlezen.

  • Google Maps API is nu vereist
  • Hoe Google Maps in WordPress toe te voegen zonder een plug-in
  • WordPress Google Maps-plug-ins die u meer flexibiliteit geven
  • Prestatie-effect van Google Maps en tips om de prestaties te verbeteren

Google Maps API is nu vereist

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

Google Maps API-prijzen

Google Maps API-prijzen

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

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

  1. Meld u aan voor een Google Cloud Platform Console-account en configureer het.
  2. Voeg uw factureringsgegevens toe, ook al ontvangt u misschien nooit een factuur.
  3. Voeg de API-sleutel toe aan uw Google Maps-insluitcode of plug-in-instellingen.

Een Google Maps API-sleutel verkrijgen

Hieronder vindt u stappen voor het verkrijgen van uw 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 uw factureringsaccount in. Hoewel ze je vragen om een ​​creditcard te registreren, mogen er nooit kosten in rekening worden gebracht, tenzij je de hoge gebruikslimieten overschrijdt.

Stap 4

U wordt gevraagd een of meerdere producten te kiezen. Dit is afhankelijk van het type kaart dat u gebruikt. Als u bijvoorbeeld een kaart op uw WordPress-site insluit zonder een plug-in (zoals weergegeven in de onderstaande stappen), dan kiest u de Google Maps Embed API.

Google Maps Embed-API

Google Maps Embed-API

Als u een plug-in zoals Google Maps Widget gebruikt (zoals weergegeven in de onderstaande stappen), dan zou u de Google Maps Static API kiezen.

Als u een plug-in of thema van derden gebruikt, moet deze documentatie hebben over welk type Google Maps-implementatie ze gebruiken. Maak je geen zorgen, je kunt altijd meerdere typen toevoegen en deze later wijzigen.

Stap 5

Klik op 'Inschakelen'.

Google Maps API inschakelen

Google Maps API inschakelen

Stap 6

Klik op "API's" en vervolgens onder "Inloggegevens" ziet u uw API-sleutel.

Google Maps API-sleutel

Google Maps API-sleutel

Stap 7

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

Om dit te doen, klikt u gewoon op de naam van uw API-sleutel en kunt u een beperking toevoegen. Voor uw WordPress-site zou het toevoegen van een HTTP-verwijzer voldoende moeten zijn. Zoals https://yourdomain.com/*. Hierdoor kan het alleen bellen op uw website.

Beperking Google Maps API-sleutel

Beperking Google Maps API-sleutel

Hoe Google Maps in WordPress toe te voegen zonder een plug-in

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

Hier is hoe het werkt:

Stap 1: Kopieer de insluitcode van Google Maps

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

Als u bijvoorbeeld 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.

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

Toegang krijgen tot de insluitcode

Toegang krijgen tot de insluitcode

Selecteer in de lijst met menu-items de optie voor: Kaart delen of insluiten:

Open de insluitopties

Open de insluitopties

Dat gaat open Delen pop-up. Klik in die pop-up op de Een kaart insluiten Tab.

Vervolgens kunt u uw gewenste maat kiezen met behulp van de vervolgkeuzelijst. Voor de meeste WordPress-sites werkt de standaardgrootte goed, maar u kunt de kaart indien nodig groter of kleiner maken.

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

De insluitcode van WordPress Google Maps

De insluitcode van Google Maps

U moet dan uw API-sleutel aan de code toevoegen. Dus je code zou er ongeveer zo uit moeten zien:

Stap 2: voeg de insluitcode van Google Maps toe aan de WordPress-site

Het enige dat u nu hoeft te doen, is die insluitcode toevoegen aan uw WordPress-site in de post of pagina waar u uw kaart wilt opnemen.

Als je de nieuwe WordPress Gutenberg-blokeditor gebruikt die is uitgebracht met WordPress 5.0, kun je dat doen door a . toe te voegen Aangepaste HTML blok en plak de insluitcode in het blok. Vergeet niet uw API-sleutel toe te voegen.

Hoe de insluitcode in de WordPress-blokeditor toe te voegen

Hoe de insluitcode in de WordPress-blokeditor toe te voegen

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

Als je nog steeds de klassieke TinyMCE-editor gebruikt, kun je de insluitcode van Google Maps toevoegen door de Tekst tab en plak de code daar:

Hoe de insluitcode in de WordPress Classic-editor toe te voegen

Hoe de insluitcode in de WordPress Classic-editor toe te voegen

Nadat u de code heeft toegevoegd, kunt u teruggaan naar de Visual tabblad om een ​​live voorbeeld van uw kaart te zien.

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

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

Als u creatiever wilt worden als het gaat om zaken als meerdere locatiemarkeringen, aangepaste annotaties, enz., kunt u dat nog steeds doen zonder dat u een plug-in nodig hebt met de My Maps-service van Google.

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

Google My Maps-voorbeeld

Google My Maps-voorbeeld

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

Stap 1: Maak uw kaart in Google My Maps

Ga om te beginnen naar Google My Maps en maak een nieuwe kaart. Van daaruit kunt u de interface voor het maken van kaarten gebruiken om uw kaart te bouwen:

De Google My Maps-interface

De Google My Maps-interface

Hoewel we er niet te veel in detail op ingaan, kun je met deze interface behoorlijk creatieve kaarten maken. Voor een diepere kijk behandelt dit Help-artikel van Google veel van de belangrijke functionaliteit.

Stap 2: Genereer insluitcode

Zodra u klaar bent met het maken van uw kaart, moet u de insluitcode genereren.

Voordat u die code kunt krijgen, moet u echter eerst uw kaart openbaar maken. Klik hiervoor op de Delen knop. Klik vervolgens op Veranderen…in de pop-up:

Instellingen voor delen van Google My Maps

Instellingen voor delen van Google My Maps

Selecteer vervolgens On - Openbaar op internet en klik op Opslaan:

Link delen inschakelen

Link delen inschakelen

Zodra je dat hebt gedaan, klik je op het vervolgkeuzemenu naast de titel van je kaart en selecteer je Insluiten op mijn site om de daadwerkelijke insluitcode te genereren:

Toegang tot de My Maps-insluitcode

Toegang tot de My Maps-insluitcode

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

De My Maps-insluitcode

De My Maps-insluitcode

Stap 3: Insluitcode toevoegen aan WordPress-site

Nu kunt u die insluitcode aan uw WordPress-site toevoegen, net zoals u zou doen met de insluitcode die u van de gewone Google Maps-website krijgt.

Als je niet zeker weet hoe je dat moet doen, klik dan hier om van bovenaf naar dat gedeelte van de tutorial te gaan.

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

Naast de handmatige methoden hierboven, zijn er ook talloze WordPress Google Maps-plug-ins waarmee u kaarten op uw site kunt insluiten.

Er zijn een paar redenen waarom u een van deze plug-ins zou willen overwegen in plaats van de handmatige methoden:

  • Hiermee kunt u meer gecompliceerde kaarten maken met een eenvoudige interface.
  • U kunt alles doen zonder uw WordPress-dashboard te verlaten.
  • Sommigen van hen linken naar WordPress. U kunt bijvoorbeeld kaartmarkeringen koppelen aan WordPress-berichten.
  • Sommigen van hen kunnen u helpen Google Maps te optimaliseren voor prestaties (hier later meer over).

Voor al deze plug-ins moet u uw eigen Google Maps API-sleutel genereren voordat u kaarten kunt insluiten. Deze tutorial laat je zien hoe je dat doet.

Worstel je met downtime en WordPress-problemen? Behmaster is de hostingoplossing die is ontworpen om u tijd te besparen! Bekijk onze functies

Google Maps Widget

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

Het is een geweldige optie als je iets eenvoudigs en lichtgewichts wilt. Zodra u het activeert, moet u uw Google Maps API-sleutel pakken en deze in de instellingen van de plug-in pluggen. U kunt een Google Map toevoegen aan elk widgetgebied op uw site. Vervolgens 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 meteen een interactieve kaart gebruiken, en met de Pro-versie kun je overal op je site kaarten met een shortcode insluiten.

Google Maps Makkelijk

Google Maps Easy helpt u bij het maken van aangepaste kaarten met uw eigen markeringen en annotaties.

Wanneer u markeringen toevoegt, kunt u uw eigen aangepaste pictogrammen uploaden, tekst en afbeeldingen opnemen in de markeringsbeschrijving en nog veel meer. U kunt ook bepalen hoe uw kaart functioneert, zoals kiezen of gebruikers wel of niet willen inzoomen:

Google Maps Eenvoudige interface

Google Maps Eenvoudige interface

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

intergeo

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

Nadat u de plug-in hebt geïnstalleerd en geactiveerd, kunt u uw kaarten rechtstreeks vanuit uw WordPress-dashboard bouwen:

Intergeo-interface

Intergeo-interface

Vervolgens kunt u ze overal op uw site insluiten met behulp van een shortcode.

Gutenberg-blok voor insluiten van Google Maps

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

Met dit blok kunt u elk adres insluiten en ook kiezen:

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

Je kunt er niet je eigen aangepaste kaarten mee maken, maar het is een handige optie als je de nieuwe blokeditor gebruikt en gewoon een gemakkelijke manier wilt om wat eenvoudige kaarten toe te voegen.

Google Maps kan uw WordPress-site vertragen - laat het niet gebeuren

Hoewel u met Google Maps een heleboel coole functionaliteit op uw site kunt insluiten met zijn interactieve kaarten, is er een prestatieafweging omdat het een groot aantal scripts moet laden om al die interactieve functionaliteit mogelijk te maken.

Om een ​​lang verhaal kort te maken, het insluiten van interactieve Google Maps kan uw site vertragen.

Er zijn een paar manieren waarop je dit kunt bestrijden.

Ten eerste, als je geen mensen nodig hebt om interactief door je kaart te kunnen bladeren op uw website, is een eenvoudige manier om dingen te versnellen zonder tools van derden:

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

Op die manier laadt uw site gewoon een gewone afbeelding - niet alle scripts die aan Google Maps zijn gekoppeld.

Als alternatief voor dit handmatig te doen, kunt u ook de gratis AWEOS Google Maps iframe load-per-click-plug-in gebruiken. Deze plug-in vervangt automatisch ingesloten Google Maps door een generieke tijdelijke aanduiding. Als een gebruiker vervolgens op de Kaart laden knop, wordt de volledige Google Maps-embed geladen:

Tijdelijke afbeelding voor Google Maps

Tijdelijke afbeelding voor Google Maps

Of u kunt ook de Google Maps Static API gebruiken, die een normale afbeelding retourneert zonder JavaScript. Met sommige plug-ins van Google Maps, waaronder Google Maps Widget en Gutenberg Block For Google Maps Embed, kunt 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.

Als dat het geval is, is een andere goede manier om Google Maps te versnellen het gebruik van trage voortgang. Met lui laden wacht uw site met het laden van Google Maps-insluitingen onder de vouw totdat bezoekers op de pagina beginnen te scrollen. Dat houdt de laadtijden van uw eerste pagina snel, terwijl u toch interactieve Google Maps-inhoud kunt insluiten.

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

Er zijn een paar plug-ins waarmee u dit kunt doen. Met de a3 Lazy Load-plug-in kunt u bijvoorbeeld iframe-insluitingen lui laden, waaronder Google Maps:

Lazy Google Maps laden

Lazy Google Maps laden

Andere opties zijn:

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

Samengevat

Als u alleen een eenvoudige kaart op uw site wilt insluiten, kunt u Google Maps zonder plug-in aan WordPress toevoegen met behulp van de ingebouwde insluitcode-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-plug-ins 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 wanneer dit absoluut noodzakelijk is en overweeg tactieken zoals tijdelijke afbeeldingen of lui laden om het negatieve effect op de prestaties te verminderen.

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

Gerelateerde artikelen

0 Comments
Inline feedbacks
Bekijk alle reacties
Terug naar boven knop