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

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:

  1. 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.
  1. 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.
  1. 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.
  1. 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.
  1. 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}".
  1. 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:

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