Custom Styled Google Maps with Webflow CMS Items
How to add dynamic google maps with a custom style to your Webflow CMS item pages
.png)
In this tutorial we add Google Maps to our Webflow site... but we take it to eleven. Instead of a static map location, we are using an address from a CMS collection... and even better, we are using a custom map style - not the default Google Maps styles (road, satellite, hybrid). So if you want to have a Google Map for each item in your CMS collection and you want to style the map to better fit your brand... this is the tutorial for you.
We use a few tools in this tutorial, so be sure to follow along!
- Snazzy Maps
- Google Could Console
- Google Cloud Maps Javascript API
- Google Cloud Maps Places API
- Google Cloud Maps Geocoding API
- Webflow
Code Snippet
Copy the code below into an embed element on your CMS Collection Item page. Be sure to replace all spots with [*___] the appropriate data.
