Google map embed in dynamic page

Hi all,
I am trying to embed google my map in dynamic page, so that the google map changes depending on the name of the city. And this embedded google my map will show different real estates with marker in each city. I created each map by city in Google my map and also marked all the properties on each map.

It is first time I make a website and haven’t learnt in before.
So my code might not make any sense.
Would be really appreciated if anyone can give some help.

Here is what I wrote :

Purple colour field is “name” of cities.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Sol,

You could do this using the CMS by using a Rich Text Field and then adding the iframe code to the collection item itself:

You can then add an HTML embed element to the page and use the iFrame code field.

If you’re looking to use custom code as you suggested I’d be happy to have a crack at writing some code for that, it would be great if you could send through your read-only link so I can better tailor it to your site.

Cheers!

2 Likes

Hi mww,
Thank you so much for your answer.
You are my life saver :face_holding_back_tears:
This question might be stupid :sob:
But do I use same code in both collection contents and the page where I want to show the map?

OMG I tried again and it worked!!!
Thank you soooo much!
But I have one more question.


As you see on the screenshot, the map changed to Birmingham but on the map, the map didn’t move to the marker in Birmingham. The center still stays in London.
Do you know how to change the map’s center by city?
Thank you sooooo much again :innocent:

Hi @Sol,

You would use different codes for each collection based on the location. It would be great if you can send through the read-only link so I can do some testing and see what might be causing the discrepancy between the collection item and map data.