Create an Interactive Map with Webflow CMS

Steve Builds Websites May 15, 2025
Video Thumbnail
Steve Builds Websites Logo

Steve Builds Websites

@stevebuildswebsites

About

I got interested in website tools after I launched my own — and failed. In 2012, I launched a website builder but soon realized the market was already crowded with competitors. Rather than adding yet-another website builder, I saw a need to help people navigate the existing website builders and find the best ones. That insight led me to create Site Builder Report in 2013, where I began reviewing website builders. In 2017, I added a YouTube channel called Steve Builds Websites. And while I still continue to write at Site Builder Report, my real passion has shifted towards creating videos for Steve Builds Websites.

Video Description

Atlist — https://atlist.com/?c=sbr_video_webflow_cms Zapier - https://www.zapier.com In this tutorial, I’ll show you how to build an interactive map in Webflow that syncs with a CMS Collection—and toggles between a map view and a list view using the same data. Webflow doesn’t support maps like this out of the box, so we’ll use Atlist to create the interactive map. To keep everything in sync, we’ll use Google Sheets as our source of truth and Zapier to automate updates between Sheets and Webflow. This setup is perfect for directories, guides, store locators or anything where you want users to explore content visually on a map and in a structured list. And the best part? You can build it all without writing a single line of code. If you end up building something, drop it in the comments—I’d love to see it!