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 embed a dynamic Google Map on a Webflow CMS template page using a CMS address field and apply a Snazzy Maps custom style, follow these steps:

1. Get Your Google Maps Embed API Key

• Sign in to the Google Cloud Console.
• Create or select a project.
• Enable the Maps Embed API.
• Go to APIs & Services > Credentials and create an API key.
• Restrict the key to only Embed API for security.

2. Get the CMS Address Field Ready

• In your CMS Collection, ensure you have a plain Text Field for the address you want to map (e.g., "123 Main St, New York, NY").

3. Get the Snazzy Maps Style JSON

• Go to Snazzy Maps, pick a style you like.
• Click "Use Style" and copy the raw JSON styling code (you’ll use this in a custom JavaScript snippet).

4. Insert Google Maps Embed with Dynamic Address

Webflow does not allow inserting CMS variables into raw HTML Embed directly inside an iframe src. Instead, you’ll use a custom embed + CMS fields + custom JavaScript.

• Add an Embed element to your CMS template page.
• Paste this inside the Embed field:

<div id="map" style="width: 100%; height: 400px;"></div><script>  var address = "{{wf {&quot;path&quot;:&quot;address&quot;,&quot;type&quot;:&quot;PlainText&quot;} }}";</script>

• Replace "address" with the CMS field slug for your address.
• This script defines the address dynamically from your CMS and sets up the map container.

5. Add Snazzy Maps Styling and Load Google Maps API

• Go to Site Settings > Custom Code > Footer and insert this script block:

<script>  function initMap() {    var geocoder = new google.maps.Geocoder();    var styledMap = new google.maps.StyledMapType(/* PASTE YOUR SNAZZY STYLE JSON HERE */, {name: "Styled Map"});        geocoder.geocode({ address: window.address }, function(results, status) {      if (status === 'OK') {        var map = new google.maps.Map(document.getElementById('map'), {          zoom: 14,          center: results[0].geometry.location,          mapTypeControlOptions: {            mapTypeIds: ['styled_map']          }        });        map.mapTypes.set('styled_map', styledMap);        map.setMapTypeId('styled_map');        new google.maps.Marker({          position: results[0].geometry.location,          map: map        });      }    });  }</script><script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

• Replace YOUR_API_KEY with your actual Google Maps API key.
• Paste your Snazzy Maps JSON style where indicated (as a JavaScript array).
• This script will geocode the dynamic address and apply the custom style.

Summary

Use a CMS text field for the address and dynamically pass it to a JavaScript Google Map embed using an <Embed> element and custom scripts. Apply the Snazzy Maps style using the MapType parameter in the Google Maps API and insert styling JSON into the script.