Google Maps kaarten toevoegen aan WordPress

Er zijn diverse gratis plugins om Google Maps kaarten toe te voegen aan je WordPress-site. Toch kun je ook zonder plugins en misschien wel net zo snel de posts, pagina’s en widgets verlevendigen met Google Maps-kaarten. In deze handleiding zal ik twee manieren bespreken om Google-kaartjes aan je WordPress-blog of site toe te voegen.

Google Maps toevoegen aan je WordPress zonder plugin

De snelste manier om Google kaarten aan je WordPress-site toe te voegen is via Google.nl/maps. Vul via de balk links de bestemmingen of de route in die je op de kaart wilt tonen en klik onderaan de pagina op het tandwieltje. Er verschijnt een popup scherm. Klik op ‘kaart delen of insluiten’. Je kunt dan weer kiezen tussen ‘link delen’ of ‘kaart insluiten’. Via de knop ‘Normaal’ kun je het formaat van de kaart aanpassen in ‘klein’, ‘groot’, ‘normaal’ of ‘aangepast formaat’. Ik kies altijd voor de laatste optie zodat ik de kaart precies op de juiste breedte van de tekstkolom of in een widget in de sidebar kan laten verschijnen. Je kunt dan je voorbeeld op ware grootte bekijken.

Google maps kaart in WordPress tonen

Kopieer vervolgens de iframe-code en sla deze even tijdelijk op in bijvoorbeeld een Kladblok-bestandje. Open vervolgens in je WordPress-Dashboard de WordPress-post, pagina of widget waarin het Google-kaartje moet komen. Zet de post of pagina op Tekst-modus via de Tekst-knop rechts boven de editor. Plak nu de volledige iframe-code op de plek waar je Google kaartje moet verschijnen.

Dit is wat mij betreft de snelste methode en je hoeft geen aparte plugin te installeren. Nadeel: er verschijnen zelfs bij een simpele routebeschrijving weer aardig wat coderegels in je bericht, je kunt de markers geen kleuren geven en bij een routebeschrijving kan er maar één marker geplaatst worden. Wil je meer pointers in een Google-kaartje plaatsen, dan kun je gebruik maken van het online programma van Mapmaker, maar daarvoor moet je je weer registreren en deze genereert weer een javascript-code. Dat kan anders en misschien wel beter.

Google kaarten voor WordPress maken met de Mapsengine

Google biedt zelf een alternatief met de Mapsengine. Met de Mapsengine kun je gedetailleerde kaarten op maat en van hoge kwaliteit maken. Zet eerst in een Excel-bestandje de adressen of alleen plaatsnamen aan van de plekken die op je kaart moeten komen. In de eerste cel bovenaan(cel A1) zet je de naam ‘Places’. Open vervolgens Google Maps Engine en klik op de knop ‘Nieuwe kaart maken’. Er opent nu een nieuw venster met als titel ‘Naamloze kaart’. Net onder het knopje ‘Naamloze laag’ zie je een importeerknop. Klik daarop om je Excel-bestand te importeren. Vervolgens krijg je de vraag ‘kolommen kiezen om u plaatsmarkeringen te positioneren’. Vink hier ‘Places’ aan en klik op ‘doorgaan’. Daarna moet je nogmaals de titel van de plaatsmarkering aangeven vervolgens op ‘Voltooien’ klikken. Het kan zijn dat je dan een aantal foutmeldingen krijgt. Die staan in rood aangegeven. Het kan namelijk gebeuren dat je een tikfout gemaakt hebt in de plaatsnaam, of dat je er een landnaam achter moet zetten.

Google kaarten aanpassen

Als je de eventuele problemen opgelost hebt, kun je links in het scherm op het blauwe verfrollertje klikken ‘Individuele stijlen’. Je kunt daar elke marker desgewenst een andere kleur geven door op het linkje te klikken en vervolgens op ‘individuele stijlen’ of ‘opeenvolging van letters en kleuren’ te klikken. Je kunt hier ook een label meegeven aan je marker. Dan verschijnt de plaatsnaam duidelijker op de kaart.

Klik nu eerst linksboven op ‘naamloze kaart’ om je kaart een naam te geven en deze op te slaan op Google Drive. Daarna kun je er nog van alles aan veranderen door er bijvoorbeeld nieuwe lagen aan toe te voegen. Je kunt dan bijvoorbeeld afstanden of een routebeschrijving aan je Google-kaartje toevoegen. Een laag verwijderen doe je door op de drie puntjes te klikken die achter de te verwijderen laag staan. Er verschijnt dan een popupje waarmee je de laag kunt verwijderen. Meer opties van de Mapengine staan beschreven in deze handleiding.

Google Maps in je WordPress-site plakken

Vervolgens wil je je kaart in je WordPress-site opnemen. Dat gaat iets omslachtiger dan bij de eerstgenoemde methode. Klik in de linker knoppenbalk op ‘Delen’ Er opent dan een popupscherm van Google Drive. Standaard staat een link op ‘Prive’. Je kunt ‘m dan wel delen via Gmail, Twitter, Facebook en Google-Plus, maar je kunt die link niet embedden in je WordPress-site. Wijzig daarom de instelling onder ‘Wie heeft toegang’ van ‘Privé’ naar ‘Openbaar op internet’ en klik op ‘Opslaan’ en daarna op ‘Gereed.

Klik nu in de linkerkolom op de drie puntjes die rechts van de Delen-knop staan. Als je daar op klikt, verschijnt er een popup-menu waar je kunt klikken op ‘Insluiten’. Er verschijnt dan een nieuwe popup met daarin de i-frame-code. Kopieer die code naar een Kladblokbestandje. Desgewenst kun je daarin de breedte (= width) en de hoogte (= height) aanpassen.

Als de hoogte en breedte van het kaartje goed zijn ingesteld, kun je deze code in de webeditor plakken. Deze manier is iets bewerkelijker, maar je krijgt er wel minder code en meer opties voor terug.

Google-maps toevoegen via Gutenberg blocks

Sinds de introductie van de Gutenberg-editor voor WordPress is de blokkenbibliotheek voor de editor flink uitgebreid. Tegenwoordig zijn er ook tal van add-ons voor de Gutenberg-editor te gebruiken. Soms kun je ze als afzonderlijk Google Maps blok aan je site toevoegen, maar heel vaak maken ze onderdeel uit van een extra toe te voegen blokken- en template-bibliotheek. Het is dan afhankelijk van de overige blokken die je er bij krijgt welk Google Maps-block je kiest. Niet iedereen zit te wachten op een extra pakket aan blokken en templates waarvan je er maar een enkeling gebruikt. Dat is bijvoorbeeld het geval bij het Google-Maps-blok van Getwid. Het is simpelweg een kwestie van testen. Bedenk wel: hoe meer plugins, hoe meer code en hoe trager je site kan worden.