Google Maps kaarten toevoegen aan WordPress

doorNico van Dijk

Google Maps kaarten toevoegen aan WordPress

Google Maps insluiten in WordPressEr 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.

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.

Google Maps kaartje toevoegen aan WordPressKlik 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.

Sharing is caring!

Over de auteur

Nico van Dijk administrator

Nico van Dijk is freelance journalist en Wordpress-kenner. Lees meer.

    8 Reacties tot nu toe

    HermaGeplaatst op12:38 am - aug 26, 2015

    Hoi Nico, interessant artikel. Het lukt me alleen niet om een map toe te voegen doordat er geen tandwieltje verschijnt onder in google-maps. Wat nu?

    MartinGeplaatst op9:27 am - sep 7, 2015

    Hallo Nico hier even een vraag, ik wil op mijn website een Google-Map blad plaatsen met daarop de mogelijkheid dat mensen met een polygoon aankunnen geven waar ze iets zijn verloren.

    Hoe kan ik dit doen in wordpress?

    BoeiendheGeplaatst op10:02 am - okt 9, 2015

    Kun je dan ook nog je weergave aanpassen van het kaartje? Nu is hij heel erg uitgezoomd op mijn website, ik zo graag al mijn markers precies in beeld hebben. Weet jij hoe dat moet?

    BoeiendheGeplaatst op10:15 am - okt 9, 2015

    Ik ben er al achter…
    Je moet achter de code: dus combi letter en cijfers, zoals hieronder… toevoegen&z=
    en dan een getal, voor mij was 10 prima (volgens mij kun je 1-17 gebruiken).
    DUS BV:

    johnGeplaatst op3:34 pm - feb 28, 2016

    Hallo nico.

    Kan je ook google maps op je website integreren en dat mensen dan zelf locaties kunnen delen op de map zodat andere dit ook kunnen zien? Met een pionnetje erbij.

    Bijvoorbeeld iemand geeft een feestje en wilt dit delen oo de google maps zodat iedereen dit kan zien. Kan diegene dit dan plaatsen op de map met een pionnetje en als andere op dat pionnetje drukken dat ze dan info kunnen zien?

    Groeten john

      Nico van DijkGeplaatst op4:23 pm - mrt 7, 2016

      Beste John, als je de kaart hebt gemaakt met MyMaps van Google, dan kun je anderen toestaan die kaart te bewerken door hun mailadres in te vullen bij ‘Sharing’. Om de hele wereld toe te staan pins op jouw kaart te plaatsen is tricky. Je kaart wordt waarschijnlijk binnen de kortste keren volgeplempt met pins. En wil je dat de hele wereld kan zien waar jouw feestje is? Ik moet dan onmiddellijk even denken aan Project-X. Voor meer vragen over Google Maps kun je overigens terecht op het Google-Maps-forum.

    Geef een reactie