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
To display a Google Map on a Webflow CMS template page, dynamically pulling an address from a Collection field while applying a Snazzy Maps theme, follow these steps:
1. Get a Google Maps API Key
- Go to the Google Cloud Console and create a project.
- Enable the Google Maps JavaScript API.
- Generate an API key under APIs & Services > Credentials.
- Restrict it to your Webflow domain for security.
2. Add a Collection Field for the Address
- In Webflow CMS, create a Plain Text field named something like Location Address.
- Ensure your collection items have valid addresses (e.g., “1600 Amphitheatre Parkway, Mountain View, CA”).
3. Insert an Embed Element in the CMS Template
- Go to the CMS template where you want the map.
- Add an Embed block and insert the following code:
<div id="map" style="width: 100%; height: 400px;"></div><script> function initMap() { var geocoder = new google.maps.Geocoder(); var address = "{{wf {"path":"location-address","type":"PlainText"} }}"; geocoder.geocode({ 'address': address }, function(results, status) { if (status === 'OK') { var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: results[0].geometry.location, styles: snazzyMapStyles }); new google.maps.Marker({ map: map, position: results[0].geometry.location }); } }); } var snazzyMapStyles = [ /* INSERT YOUR SNAZZY MAP JSON STYLE HERE */ ];</script><script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap"></script>4. Apply a Snazzy Maps Style
- Go to Snazzy Maps (https://snazzymaps.com).
- Choose a style and copy the JSON object.
- Replace
snazzyMapStyles = [ /* INSERT YOUR SNAZZY MAP JSON STYLE HERE */ ];with the copied JSON.
5. Publish and Test
- Publish your Webflow site.
- Open a CMS template page to verify the map displays the correct address with the Snazzy Maps styling.
Summary
This method uses a Google Maps Embed with Webflow CMS fields, geocodes addresses dynamically, and styles the map with Snazzy Maps JSON. Ensure your Google Maps API key is active and your CMS contains properly formatted addresses.