Can I embed a "Google My Maps" in a dynamic page in Webflow so that the map changes depending on the name of the city?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

Yes, you can embed a "Google My Maps" in a dynamic page in Webflow and have the map change depending on the name of the city. Here's how you can do it:

Obtain the embed code from Google My Maps:

Go to Google My Maps and create or edit the map that you want to embed.
Click on the three dots icon in the top left corner of the map editor.
Select the "Embed on my site" option.
Copy the generated embed code.

Add an Embed element to your dynamic page in Webflow:

Open your dynamic page in the Webflow Designer.
Drag and drop an Embed element onto the page where you want the Google My Maps to appear.

Customize the embed element:

Double-click on the Embed element to open the settings panel.
Click on the "Open Code Editor" button.
Paste the embed code obtained from Google My Maps into the code editor.

Create a dynamic field for the city name:

In the Webflow Designer, go to the dynamic collection that contains the city data.
Add a text field for the city name (e.g., "City Name").
Go back to your dynamic page, select the Embed element, and click on the "+" icon in the settings panel.

Bind the embed code to the city field:

In the dynamic binding panel, select the "City Name" field from the collection.
Choose the appropriate attribute in the embed code where you want to insert the city name.
For example, if the embed code contains a placeholder for the city name like "{CITY}", select the "InnerText" attribute and enter "{City Name}".

Preview and test the dynamic map:

Preview your dynamic page to see how the map changes based on the city name.
Make sure to test different city names to ensure the map updates correctly.

By following these steps, you'll be able to embed a "Google My Maps" on a dynamic page in Webflow and have it dynamically update based on the city name. This can be useful for creating location-based pages or directory websites.

Additional questions:

How can I embed other types of maps in Webflow?
Can I customize the appearance of the Google My Maps on my dynamic page in Webflow?
Are there any limitations or restrictions when using Google My Maps with dynamic pages in Webflow?

How can I globally change the color of all links in Webflow without abandoning the CMS collection?

In Webflow, what are the pros and cons of using class names versus attributes when targeting elements with custom code plugins and libraries?

Is it possible to have Webflow go back to the last tab visited instead of redirecting to the first tab when the browser back button is clicked?

Is it possible to combine 'javascript:delay('URL') with 'javascript:history.back()' in Webflow for creating an 'about' page with a page transition and a back button?

Can I use a script to switch fonts on scrolling in Webflow for an animated text effect?

Can anyone provide code or guidance on how to make a form in Webflow email the contents of the submission to a specified email address?

Can someone help me add the "for" attribute to labels in Webflow?

How can I add custom code in Webflow to create a popup when a user exits the site?

Is it possible to force any links or scripts that appear above a specific block of code to the bottom of the head in Webflow, possibly using javascript or jquery?

What could be causing the issue with the top menu not changing to a pointing finger when hovering over certain buttons in Chrome and Edge, but working fine in Safari? Additionally, how can the issue with the menu disappearing on an early stage when making the window smaller be resolved?