Vraag

Hoe kan ik een google maps pagina insluiten op mijn pagina?

  • 11 mei 2021
  • 7 reacties
  • 131 Bekeken

Ik kan helaas niet vinden hoe ik iets kan embedden op mijn pagina. Is dat mogelijk?


7 reacties

Reputatie 7
Badge +16

Hi,

Mijn collega's bij Support hebben een manier gevonden om dit voor elkaar te krijgen. Je moet hier gebruik maken van Google Tag Manager. Hieronder de uitleg :point_down:

Google maps:

  • Ga naar Google maps

  • Voeg locatie naar keuze in

  • Klik op rood omcirkelde:

 f0wLoYT-nbV7lDmvhrtQdBqr2cZL5loQ6j6FClfysn8_YBy6L519YXahNm7BrG8Jhw19Gr2gMpAhy6JwlFY2UxwJ_jWgEG6_6_Y7IKWbHH7rKzR8W1uU31dvlS7hgxFtNNfIes1q

 

  • Er verschijnt een dropdown menu, klik vervolgens op ‘Kaart delen of insluiten’.

  • Er verschijnt een nieuw scherm, klik op ‘Een kaart insluiten’ en dan op ‘HTML kopiëren’.

mGv0wOu0pvLbqwTolq_xeyWBSO9yqwxr3SBSV3XgbSz6P_fI8Qjn4mAwKFAuvn_HMWooKgbGSJSeV2QinrSgVQ-Q4-4CL9KmYObyE8h1ch2IvLRETaPQsXyuvDa8x5CNh2s_EDr8

 

  • Plak deze HTML code op de locatie van de groene tekst:

 

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

  • Voeg vervolgens [google-maps] toe aan de locatie waar Google maps mag verschijnen. ‘[google-maps]’ voeg je toe zonder opmaak en hoofdletters!! 

  • Voorbeeld hoe het eruit ziet in mijn Footer: 

jE4DJQoa9YmGLJE24d0M8SMa-TeTaA38y5SyAzQgEDYpQTYfwrs1_5jYzaVMuxcKyawvwHr0HB01aBonGA1WLqkt2wpCWK5BYx3zYJ1JfUTPs0OnTspu2eLWL8RB3LU0NpRHCsYm

  • Sla de wijzigingen op in je beheeromgeving.

  • Bezoek je website in een incognito venster.

 

Is de Map te groot? Je kunt de afmetingen aanpassen door de groene 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>

Reputatie 4
Badge +3

Hoi @Ebbe ,

 

Ik ben er mee aan het stoeien maar ontbreekt er niet een stap? Als ik enkelt [google-maps] toevoeg dan staat er alleen de tekst, zal dit niet gelinkt moeten worden oid naar hetgene wat je in de tag manager hebt aangemaakt? 

Ennn, waar pas je als het gelukt is de grootte aan, in de tagmanager? Of ergens in MWW?

 

Alvast bedankt

Reputatie 7
Badge +16

@Peter Sorry voor de late reactie. Kun je jouw unieke code eens met mij delen? Dan check ik of deze hier wel goed gaat. Het gaat om deze 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>

 

Het groene dik gedrukte gedeelte is de code die je via Google Maps hebt opgevraagd. Deze moet je toevoegen aan bovenstaande code. Die volledige code heb ik nodig. 

Groet,
Ebbe

Reputatie 4
Badge +3

@Ebbe , ik heb hem via pm naar je verstuurd, ik hoor het graag van je.

Reputatie 7
Badge +16

Bedankt Peter. We gaan er mee aan de slag. 

Reputatie 4
Badge +3

Het is inmiddels opgelost door @Ebbe, de oplossing bleek zo simpel te zijn.

Let er op dat je bij de tag manager als laatste stap op de verzenden knop rechts bovenin drukt……

 

Reputatie 7
Badge +16

Fijn dat het is gelukt:sunglasses:

Reageer