start direct

Hoe kan ik een Google Maps pagina insluiten op mijn pagina?

bijgewerkt: 22 november 2023
Tips & tricks

Het is superhandig om een Google Maps-locatie in je webwinkel te hebben! Zo vinden klanten je winkel veel makkelijker. Ze kunnen snel zien waar je zit en het maakt de boel een stuk gebruiksvriendelijker. Plus, het geeft een fijn gevoel van vertrouwen, alsof je zegt: "Hier zijn we, kom langs!" En stel je voor, voor de online shoppers die hun spullen willen ophalen in de winkel, maakt het hun leven ook een stuk makkelijker. Dus eigenlijk, met Google Maps maak je niet alleen de boel praktischer, maar geef je ook een soepele online-naar-offline ervaring voor iedereen!

Dit is alleen mogelijk voor Mijnwebwinkel Pro en Premium.

Stap 1: controleer of je verbonden bent met Google Tag Manager

Je gaat in de beheeromgeving naar Google diensten/Google Tag Manager. Ben je verbonden? Ga dan door naar stap 2. Ben je nog niet verbonden, lees dan het artikel: Hoe koppel ik Google Tag Manager?

Stap 2: haal je code uit Google Maps

  • Ga naar Google Maps
  • Voer de locatie naar keuze in
  • Klik op de rood omcirkelde locatie
  • Er verschijnt een menu aan de linkerkant, klik vervolgens op ‘delen’.
  • Er verschijnt een nieuw scherm, klik op ‘Een kaart insluiten’ en dan op ‘HTML kopiëren’.
Klik op delen, een kaart insluiten en HTML kopiëren

Stap 3: plaats de code in Google Tag Manager

  • Plak de HTML code op de plek van 'HIER PLAATS JE GOOGLE MAPS CODE':

<script>

 var iframe = 'HIER PLAATS JE GOOGLE MAPS CODE';

 var elements = document.getElementsByTagName("p");

 [].forEach.call(elements, function (element) {

   if (element.textContent === "[google-maps]") {

     var iframeDiv = document.createElement("div");

     iframeDiv.innerHTML = iframe;

     element.parentNode.replaceChild(iframeDiv, element);

   }

 });

</script> 

  • Ga naar Google Tag manager.
  • Maak een nieuwe Tag aan en kies daarbij voor ‘Aangepaste HTML’
  • Plak hier de HTML in.
  • Voeg een trigger toe en klik op ‘All pages’.
  • Klik op opslaan > Publiceren.
     
Klik op 'Kies een type tag' en selecteer de 'Aangepaste HTML'
Vergeet niet om rechtsboven op 'Verzenden' te klikken en vervolgens op 'Publiceren'

Stap 4: plaats de code in je webwinkel

  • Voeg [google-maps] toe aan de locatie waar Google Maps mag verschijnen (Pagina inhoud, Footer, etc.). ‘[google-maps]’ voeg je toe zonder opmaak en hoofdletters!!
  • Sla de wijzigingen op in je beheeromgeving.
  • Bezoek je website in een incognito venster.
     

Tip!

Is de Map te groot? Je kunt de afmetingen aanpassen door de dik gedrukte waarden te wijzigen:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2469.212439545707!2d5.52490801597873!3d51.76572339960326!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c6fc5f69a3a123%3A0x4c20fdf1a7d56f9c!2sMyOnlineStore%20B.V.!5e0!3m2!1snl!2snl!4v1619185246319!5m2!1snl!2snl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>