UA-2131491-6

Leesvoer - oftewel ons blog

Al mijn locaties op Google My Maps

Eenvoudig een gratis, gepersonaliseerde Google Maps kaart toevoegen aan je WordPress website

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.

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.

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 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.

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 ben 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.

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 bergpas op 8 km van waar ik woon en werk – 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.

Op je website plaatsen

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!

Ik ga er van uit dat de lezers van dit blog werken met Gutenberg en WordPress 5. Om de kaart toe te voegen zul je een Custom HTML Block moeten toevoegen.

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 één van de locaties klikt komt er aanvullende informatie.

Mocht je naar aanleiding van deze blog vragen en/of opmerkingen hebben, neem gerust contact op!

2 comments

  1. 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

    1. 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

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *