Webflow sync, pageviews & more.
NEW

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?

TL;DR
  • Set up a Google Maps Embed API key and save your address in a CMS text field.
  • Add an Embed element to your CMS template to insert a map container and dynamically pull the CMS address via JavaScript.
  • Paste Snazzy Maps style JSON and Google Maps API script in your project's Footer custom code to geocode the address and apply the custom map style.

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.

Rate this answer

Other Webflow Questions