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?

Integrating Google Maps into a Webflow CMS template page using dynamic data involves a few steps. Here's how to achieve this:

​

1. Set Up Your CMS Collection

• Ensure your CMS Collection includes a plain text field for the address you want to display on the map.
• Add any additional fields as needed for more dynamic content.

​

2. Get Your Google Maps API Key

• Visit the Google Cloud Console and create a new project if needed.
• Enable the Maps JavaScript API under APIs & Services.
• Create and copy an API key for authentication.

​

3. Incorporate Snazzy Maps Style

• Choose a map style from Snazzy Maps.
• Copy the JSON code for your chosen style.

​

4. Insert a Dynamic Embed in Webflow

• Open your Webflow project and navigate to the CMS template page where you want the map.
• Drag a Dynamic Embed component into the Designer.
• Paste the following code inside the embed block, customizing it to fit your needs:

​

<div id="map" style="height: 500px;"></div>
<script>
  function initMap() {
    var geocoder = new google.maps.Geocoder();
    var address = "{{CMS Address Field}}"; // Replace with your collection field

    geocoder.geocode({'address': address}, function(results, status) {
      if (status === 'OK') {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: results[0].geometry.location,
          styles: // Paste your Snazzy Maps styles here
        });
        new google.maps.Marker({
          position: results[0].geometry.location,
          map: map
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap" async defer></script>

​

• Replace YOURGOOGLEMAPSAPIKEY with your actual Google Maps API key.
• Replace {{CMS Address Field}} with Webflow’s dynamic data element that pulls the address from your CMS.

​

5. Publish and Test

• Publish your site with the updates.
• Test the page to ensure the map displays correctly with the chosen style and dynamic address.

​

Summary

To add Google Maps with dynamic addresses on Webflow CMS pages, integrate Google Maps API with a Snazzy Maps theme by using a dynamic embed. Ensure your CMS collection is set up correctly, get an API key, paste the map code in a dynamic embed, and publish your site for testing.