Custom styled Google Maps with Webflow CMS items

How to add dynamic Google Maps with a custom style to your Webflow CMS template pages

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!

Copy the code below into an embed element on your CMS Collection Item page. Be sure to replace all spots with [*___] the appropriate data.