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:
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.
<div id="map" style="width: 100%; height: 400px;"></div><script> var address = "{{wf {"path":"address","type":"PlainText"} }}";</script>
"address"
with the CMS field slug for your address.<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>
YOUR_API_KEY
with your actual Google Maps API key.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.