With Dynamic Map by No Code Flow you can customize, implement and style an interactive & filterable cms-connected map with location pins all within Webflow.
Custom location pins and map interactions like Pop-Ups
Select between different options to style the location pins for your interactive map in Webflow. You're able to style a completely custom looking pin in a design tool of your choice like Figma. You can also select a customizable price tag or name tag, to make getting an overview of the displayed location items as simple as possible for your users.
You could even upload custom location pins for each Webflow CMS Collection Item – making it easy to highlight certain pins and locations over others on your Dynamic Map.
Create a detailed overview for each location pin on your map with a simple click or hover interaction. You can connect the Pop-Ups or Tooltips to your Webflow collection list and allow users to get a quick glimpse of the location item content with hovering or clicking on the map.
Use Google Maps or other Map-Styles
Select one of our multiple and stylish pre-styled map templates. This makes it easy to choose between different looks for the map that suites the style of your website best. You can change the look of your map afterwards once your project requirements change after a while.
With Dynamic Map you can choose Google Maps as a map look for your Webflow project, making it feel intuitive and easy to use for your users. You can also use open source map providers, which are free to use on pages with >100.000 views per month as well like OpenStreetMap. Due to that there is no dependency to a big company changing pricing models or APIs. You will also soon be able to create a completely customized looking map by yourself.
Webflow CMS-connected by design
We've built this project on top of Webflow CMS and all of your elements will be connected and stylable right within the Webflow Designer. There is no need to embed iFrames. Everything is built natively for Webflow.
Filter, search and sort your Map Items
With our optional built-in filter, you can enable your users to search, sort, or filter your map items. Connect filter chips or checkboxes to your CMS and enable live filtering on your map with ease. You can also sort items for the closest distance or add a price range slider to make finding the right locations for your users as easy as possible.
Implement Dynamic Map into your Webflow project in 3 simple steps
1 Customize your Map
First you will be able to modify all required base features for your interactive map in our NCF editor. Select between different map styles like Google Maps or OpenStreetMap, define interactions like showing a pop-up when clicking on a pin or zooming to the clicked location pin. Then, connect your CMS collection list with Dynamic Map in a single click. Last but not least you can add an optional filter which allows you to add a search bar, a sort, filter chips or checkboxes, and even add a range slider.
2 Implement your Map
Copy-paste the customized elements from the NCF Editor with ease into your Webflow project, connect your CMS to the items with a few simple – and you're good to go.
3 Style your Map in Webflow Designer
You'll be able to style every part of the Dynamic Map right within the Webflow Designer without the need to add iFrames or being able to understand custom code. The map provider itself (Google Maps vs. OpenStreetMap vs. ...) can be changed with tutorial videos we provide.
Always get the latest updates
Currently we're in an open beta state. But there are more features to come. We work hard to update our Dynamic Map experience, implementing more map styles, improved and more interaction types, and unlimited items as well as item clustering options for your next Webflow project. Stay tuned.
As a No Code Flow user, you of course will get all of these updates for free and can add them into any existing project using Dynamic Map.
