Je kunt eenvoudig een gratis, gepersonaliseerde Google Maps kaart toevoegen aan WordPress websites. Google Maps wordt vaak gebruikt om een plattegrond aan een website toe te voegen. Maar sinds 11 juni 2018 kunnen er aan het gebruik van Google Maps kosten verbonden zijn. En zul je met een API key moeten werken. Een API key zorgt er voor dat 2 systemen met elkaar kunnen samenwerken. In dit geval Google Maps en jouw website.Door de ontbrekende API key wordt de Google kaart niet weergegeven
Maandelijks tegoed
Met het instellen van de API key en het verstrekken van factureringsgegevens krijg je een maandelijks tegoed van $ 200. Hiermee kan de kaart op jouw website ongeveer 28.000 keer bekeken worden. Voor de meeste van mijn lezers waarschijnlijk meer dan genoeg. Je kunt overigens aangegeven dat je wilt worden gewaarschuwd wanneer een bepaald aantal kaartvertoningen gehaald is.
API key opvragen
De API key kun je opvragen door naar de Google Developers pagina te gaan. Klik op de blauwe Get started knop en volg de aanwijzingen.
Klik op Get started om de API Key te verkrijgen
Een superhandig alternatief zonder API key
Het is nog steeds mogelijk om een Google Maps kaart toe te voegen zonder API. En zonder factureringsgegevens met Google te delen. Een Google Maps kaart speciaal voor jou waar je zelfs meerdere locaties op kunt weergeven. En die je vervolgens aan je WordPress website kunt toevoegen. Hoe? Dat laat ik je hieronder zien.
Google Custom Map
Zoek op Google Custom Map terwijl je ingelogd bent in Google. Klik vervolgens op het eerste zoekresultaat: My Maps – About – Google Maps. Klik op de link en vervolgens op Aan de slag. Een nieuwe kaart maak je door op + nieuwe kaart maken te klikken.
Kaart maken
Als eerste wil je de naam van de kaart aanpassen. Dit kan door op Naamloze kaart te klikken. Je wilt de naam aanpassen omdat deze naam op je website getoond gaat worden. Je kunt meerdere lagen aan je kaart toevoegen. Op deze manier kunnen bezoekers een selectie van locaties op de kaart laten tonen. In dit voorbeeld werk ik met 1 laag. De naam hiervan paste ik aan door op Naamloze laag te klikken.
Pas de titel van je kaart aan. Deze verschijnt op je website!
Locatie toevoegen
Type nu in het zoekvenster het adres van de locatie in welke je wilt toevoegen. De locatie zal worden weer gegeven met een felgroene icoon. Deze kun je later aanpassen. Klik op + Toevoegen aan kaart. Ik voegde de Col de Guéry – een col op 8 km van onze vorige woon- en werkplek – aan mijn kaart toe. Na toevoegen kun je de locatie bewerken.
De kleur van de icoon kun je aanpassen door op onderaan rechts op het linkericoontje te klikken. Ik koos voor lichtgroen. Maar je kunt hier ook de icoon zelf aanpassen. Ik koos voor een fietser. Door op Meer pictogrammen te klikken kun je uit nog meer iconen kiezen.
En op dezelfde manier kun je nog meer locaties toevoegen. Ik voegde in totaal 8 cols en klimmetjes die leuk op de racefiets zijn toe. Door uit te zoomen maakte ik deze 8 zichtbaar op de kaart. Zo zullen de locaties ook op de website weergegeven gaan worden. Door op Voorbeeld weergeven te klikken kun je zien hoe de kaart er op jouw website uit gaat zien.
Al mijn locaties op Google My Maps
De Google Maps kaart toevoegen aan WordPress website
Voordat je de kaart op je website kunt insluiten zul je de toegangsinstelling van privé naar Aan – Openbaar op internet moeten veranderen. Klik hiervoor op Delen en verander de toegangsinstelling van privé naar Aan – Openbaar op internet. Je kunt nu de insluitcode verkrijgen die je nodig hebt. Klik op de drie verticale puntjes naast de kaarttitel en klik op Insluiten in mijn site. Kopieer de code die verschijnt en klik op OK. Wees niet bang dat het vervolg ingewikkeld gaat worden omdat je met een code moet gaan werken!
Zelf bouw ik mijn websites voornamelijk met Divi van Elegant Themes waar ik ook affiliate partner van ben. Divi is meer dan alleen een WordPress thema, het is een pagebuilder zodat je op de webpagina’s zelf bouwt en direct kan zien wat je aan het doen bent. Door een code module toe te voegen kun je de HTML-code van het kaartje toevoegen.
Wanneer je werkt met Gutenberg zul je een Custom HTML Block moeten toevoegen om de kaart te plaatsen.
Selecteer Custom HTML om de kaart toe te voegen
Kopieer hier de zojuist opgeslagen code in. En… klaar is Kees! De kaart verschijnt zoals hieronder in je blog of op je webpagina. Door linksboven op het legenda-icoon te klikken verschijnt de legenda. Wanneer je op een locatie klikt komt er aanvullende informatie.
Mocht je naar aanleiding van deze blog vragen en/of opmerkingen hebben, neem gerust contact op!
Met regelmaat plaats ik Blogs en korte Tips & tricks. Wil je mijn tips en blogs niet missen? Schrijf je dan in voor mijn nieuwsbrief.
Hallo! Even een klein ‘probleempje’ signaleren. Ik heb een aantal kaarten aangemaakt voor mijn site over Schotland. Werkt prima…..maar opeens werkt “meer pictogrammen” niet meer. Ik kan er wel heen, maar vervolgens, als ik dan een ander pictogram wil selecteren, werkt dat niet meer. Ze zijn onbereikbaar! Dat is heel vreemd. Ik kon altijd het standaardpictograam (druppeltje) zonder problemen veranderen in een kasteeltje of museum. Enig idee?
Kan het zijn dat je een maximum toegelaten aantal punten hebt bereikt? Je zou dan een nieuwe laag/layer kunnen toevoegen en daarin de nieuwe punten kunnen toevoegen.
Margriet. Leuk dat je me even wilt helpen. Hoezo bedoel je maximaal aantal punten? Ik kan op elke nieuwe kaart zonder problemen binnen de verschillende lagen tien-tallen items zetten. Ik kan alleen opeens de standaard ‘druppels’ niet meer wijzigen in een ander pictogram.
Ook op mijn eerdere kaarten is dat niet meer mogelijk.
Is er dan een limiet?
Opgelost! Het probleem heeft “zichzelf” opgelost. Waarschijnlijk toch een storing bij Google. Leuk dat je toch even hebt gereageerd, terwijl we elkaar niet kennen.
De website kan weer verder. Nog heel veel te doen. Nogmaals bedankt voor je reactie!
Volgens mij heb je in de API inderdaad niet die bovenste balk, maar je zou ook in de CSS een display: none op die balk kunnen plaatsen. Dan wordt hij niet meer weergegeven.
Dit artikel is geschreven door Margriet Ravensbergen van Buro RaDer. Sinds 2007 bouwt zij WordPress websites. Sinds 2019 richt zij zich volledig op websites gemaakt met het Divi thema van Elegant Themes.
Bonjour,
Il heb zo een Google Map gemaakt en heb geplaatst op mijn website,
Waarom zou ik een API nodig hebben, ik snap het niet eigenlijk.
Met vriendelijke groet
Evelyne
Dat is wanneer je via de andere methode werkt, Evelyne. Dus wanneer je niet met Google My Maps werkt maar bijvoorbeeld met een WP plugin.
Groet,
Margriet
Hallo! Even een klein ‘probleempje’ signaleren. Ik heb een aantal kaarten aangemaakt voor mijn site over Schotland. Werkt prima…..maar opeens werkt “meer pictogrammen” niet meer. Ik kan er wel heen, maar vervolgens, als ik dan een ander pictogram wil selecteren, werkt dat niet meer. Ze zijn onbereikbaar! Dat is heel vreemd. Ik kon altijd het standaardpictograam (druppeltje) zonder problemen veranderen in een kasteeltje of museum. Enig idee?
M.v.g.
Dirk Jelier
Ha Dirk,
Kan het zijn dat je een maximum toegelaten aantal punten hebt bereikt? Je zou dan een nieuwe laag/layer kunnen toevoegen en daarin de nieuwe punten kunnen toevoegen.
Groet,
Margriet | Buro RaDer
Margriet. Leuk dat je me even wilt helpen. Hoezo bedoel je maximaal aantal punten? Ik kan op elke nieuwe kaart zonder problemen binnen de verschillende lagen tien-tallen items zetten. Ik kan alleen opeens de standaard ‘druppels’ niet meer wijzigen in een ander pictogram.
Ook op mijn eerdere kaarten is dat niet meer mogelijk.
Is er dan een limiet?
Opgelost! Het probleem heeft “zichzelf” opgelost. Waarschijnlijk toch een storing bij Google. Leuk dat je toch even hebt gereageerd, terwijl we elkaar niet kennen.
De website kan weer verder. Nog heel veel te doen. Nogmaals bedankt voor je reactie!
Beste Dirk,
Fijn dat het is opgelost! En dat je weer verder kunt. Leuke site overigens. Kwam vroeger voor mijn werk nogal eens in Fort William.
Groet,
Margriet Ravensbergen | Buro RaDer
Ik zou graag zo een kaart maken zonder de bovenste balk, waar een weergave is van de google account/naam.
Dien ik dan te werken met de API ?
Volgens mij heb je in de API inderdaad niet die bovenste balk, maar je zou ook in de CSS een display: none op die balk kunnen plaatsen. Dan wordt hij niet meer weergegeven.