Vraag

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

V

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

12 reacties

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

Ebbe - Community Manager
P
Reputatie 4
Badge +4

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

Ebbe
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

Ebbe - Community Manager
P
Reputatie 4
Badge +4

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

Ebbe
Reputatie 7
Badge +16

Bedankt Peter. We gaan er mee aan de slag. 

Ebbe - Community Manager
P
Reputatie 4
Badge +4

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

 

Ebbe
Reputatie 7
Badge +16

Fijn dat het is gelukt:sunglasses:

Ebbe - Community Manager
Nanaas
Reputatie 7
Badge +9

Hoi @Ebbe, deze optie is niet responsive (dus op mobiel valt eigenlijk de kaart weg). Heb jij wellicht nog een optie om de codering aan te vullen zodat het wel responsive wordt? 

Rianne, grafisch ontwerper en interieurontwerper. Eigenaresse van Nanaa's Online Conceptstore, webshop voor woonaccessoires. Bekijk de collectie op www.nanaas.nl ♥ Ontwerpt ook voor andere webshops!
Ebbe
Reputatie 7
Badge +16

@Nanaas Als je de iframe code aanpast moet het lukken. Dat is de code die je krijgt van Google maps. Als je de width op 100% zet, en dan de height op bijvoorbeeld 450, dan moet het lukken. 

Ebbe - Community Manager
Nanaas
Reputatie 7
Badge +9

@Nanaas Als je de iframe code aanpast moet het lukken. Dat is de code die je krijgt van Google maps. Als je de width op 100% zet, en dan de height op bijvoorbeeld 450, dan moet het lukken. 

@Ebbe Bedankt! Is gelukt, de width stond inderdaad op een ‘vaste maat' i.p.v. 100%.

Rianne, grafisch ontwerper en interieurontwerper. Eigenaresse van Nanaa's Online Conceptstore, webshop voor woonaccessoires. Bekijk de collectie op www.nanaas.nl ♥ Ontwerpt ook voor andere webshops!
P
Reputatie 1
Badge +1

Wanneer ik dit toevoeg krijg ik dit te zien op mijn pagina https://goo.gl/maps/DCqr1SCrQHNENgJ78 

helaas verschijnt er geen map.

Ebbe
Reputatie 7
Badge +16

Wanneer ik dit toevoeg krijg ik dit te zien op mijn pagina https://goo.gl/maps/DCqr1SCrQHNENgJ78 

helaas verschijnt er geen map.

Ik verwacht dat je niet de juiste tag hebt toegevoegd in Google Tag Manager. Ik heb in de footer ‘[google-maps]’ toegevoegd. Als de tag goed is toegevoegd in tag manager, komt daar de map te staan. Als je dat doet krijg je een link naar Google maps. Dit is niet correct. Deze stappen moet je opnieuw uitvoeren: 

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>

Ebbe - Community Manager

Reageer


Forumvoorwaarden