Streaming live at 10am (PST)

Integrating Google Maps with a Dynamic Embed Element & Webflow CMS


#1

Hey @Waldo, anyway to utlize this new feature with a google map embed? Creating a directory with a couple hundred records and would love to have the ability to include a map embed for each dynamic record.


Ability to Embed Custom Code in Dynamic List
#2

Hi @KProServices, yep it should work. If you might want to create a reduced case site to get it to work or to ask questions.

I would suggest to create a collection with fields to hold the map parameters. Those will be used in the custom code snippet for each map.

Next use the html dynamic embed to put in the code snippet once and use the fields from the cms as the parameters needed in the map :slightly_smiling:


#3

@Cyberdave, thanks! This would be something a client would be inputting so what parameters would they grab out of the default embed code?

Using webflow as an example...

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3154.0013551699426!2d-122.4066178993825!3d37.76656641506062!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e2dfcfcb397%3A0xbd614483fc75e307!2sWebflow!5e0!3m2!1sen!2sca!4v1458149367892" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>


#4

Hey,

This is absolutely possible.

The standard Iframe embed isn't usable because of all the crazy characters.

You will need to head over to google and get a maps API Key.
https://developers.google.com/maps/documentation/embed/

You can then use a simple call and dynamic data to generate the map.

I will create a more detailed explanation soon. :smile:


#5

@AlexN, yeah that's what I thought but I figured I would ask... I want the client to be able to update this themselves and it needs to be as straightforward as possible. I will play around with it and see what I come up with. A more detailed explanation would definitely be useful to the community as I see this as a common use case.


#6

@KProServices

Have a look at this Tips and Trick Posted I created addressing this question.


#7

Hi Alex, yet another great tutorial. Thanks a lot for sharing!

I managed to get it work but unfortunately whenever I open the map of each of the 4 dynamic items of the Collection I keep getting the same map opening (i.e. the one corresponding to the address of Item "A").

Perhaps you can help me with figuring out what I'm doing wrong there... ; )

Here's the public link: https://preview.webflow.com/preview/store-cms-1777f9f93c6059203a9dff1e8d301?preview=aa53394c586858b6124d92864e4f240a

You just need to click on "View Map" and the slide in map will show.

Thanks Alex.


#8

Nice looking design.

The interaction only works if the element your clicking is a direct sibling to the modal. Pull the view map and visit online elements out of the stockist-link element. This will mean the view map and visit online links are now direct siblings to the modal. You can set the view map link to 50% and float left. You will need to also click the only effect sibling box in the interaction settings.




#9

Legend!

Thanks a lot Alex.


#10