Dynamic CMS Map - Solved with Dynamic Embeds, Examples in Post

What would be really handy for a project I’m planning at the moment would be a way to set a street location/address in a collection item, then to be able to dynamically insert that into the map object.

1 Like

Hi @oramsdesign

You can add dynamic map to Webflow CMS. All you have to do is use rich text element for one of dynamic fields and add “Media” element inside it.

Then you add link from google maps there

And get map inside the dynamic item

Sure it is not the same as simply add address, but working awesome as a workaround.

Regards,
Anna

3 Likes

Hi @sabanna
Hadn’t thought of that. That will definitely be a handy workaround thanks!

1 Like

@sabanna

With the addition of the new Dynamic Embedding, I’ve been able to make a dynamic map embed for CMS posts.
Here’s how to do it:

Firstly, you will need to log in to the Google Developer’s Console, create a new project for your website, then in the API manager, activate the Google Maps Embed API. You will need to copy the API code that’s generated as that will be needed for the embed.

Next we go back to webflow.
In your posts collection where you want the maps to be, add a plain text field for typing in the address.

It’s important that when the address is typed that instead of using spaces, you use the plus (+) symbol as shown in the image above.

Then either in a dynamic list, or in a collection page template, use the HTML embed item and input the following code:

I’ve blurred out my API code, and that’s where you need to paste yours. And the “Google Maps Address/Location” is the plain text field we created for the address.

Here’s the results of the test I did setting this up:


And that’s all there is to it. Custom Maps in CMS can be added with just typing a single line into a plain text field.
Hope this is helpful to someone.

15 Likes

Hello @oramsdesign

I tried this tutorial and everything went just fine until I saved the embed code, I got this message

The funny thing is that I used the API key that I created specifically for this project. Any thoughts?

Thanks for the tips!
However, I’m getting the same results as @aaronocampo, @oramsdesign. :frowning:
Any additional thoughts on this?

I am having the same issue. Anyone figure it out how to do properly?

In the end I simply put in custom code that inserts a map (not using the key method) but also inserts the actual map view code from a CMS item using the maps.google.com embed method.
Visit a location on Gmaps, click share, click “use embed method” find the code after the “?”. There’s a little trickery but I think you’ll get the hang of it. :wink:

A possible solution might be this dynamic map with location pins on it (https://ncf-map-demo.webflow.io/)). Every pin is a Webflow CMS item. Every aspect except for how the actual map looks can be modified native within the Webflow designer. We designed it as a cloneable component with a little video tutorial to implement it – should take you around 10 minutes to get started.

For us having this component definitely was a game changer, because we often get the customer request to display their different locations on a map and we found this was the best possible way to do it within Webflow.

Map Vid