Webflow sync, pageviews & more.
NEW
Answers

How can I use Google Maps in a dynamic embed on a CMS template page in Webflow, pulling the address from a field in my collection and applying a Snazzy Style theme to it?

To use Google Maps in a dynamic embed on a CMS template page in Webflow, you can follow these steps:

1. Set up your CMS collection:
- Create a collection in Webflow that includes a field to store the address, let's call it "Address".
- Add the necessary fields for other data you want to associate with each location, such as title, description, etc.

2. Add a dynamic embed element:
- Open your CMS template page.
- Drag and drop a dynamic embed element onto your template where you want to display the map.
- Select the dynamic embed element and click on the "Bind to field" button in the settings panel.
- Choose the "Address" field from your CMS collection to bind it to the dynamic embed.

3. Generate the Google Maps embed code:
- Open Google Maps in a separate tab.
- Search for the first location in your collection and make sure it displays correctly on the map.
- Click on the hamburger menu in the top left corner of Google Maps and select "Share or embed map".
- Switch to the "Embed map" tab.
- Copy the generated embed code.

4. Modify the embed code:
- Go back to your Webflow project and paste the Google Maps embed code into the dynamic embed element.
- Customize the embed code to include the dynamic address by replacing the original address in the code with the dynamic binding. For example, replace:
```html
src="https://www.google.com/maps/embed?..."
```
with:
```html
src="https://www.google.com/maps/embed?address={{Address}}"
```

5. Apply Snazzy Style theme:
- Open Snazzy Maps (https://snazzymaps.com/) in a separate tab.
- Browse through the available themes and select one you like.
- Copy the JSON code for that theme.

6. Apply the style theme:
- Go back to your Webflow project and open the dynamic embed element settings.
- Add a style attribute to the `