The Dynamic Map for Webflow CMS
Customize, implement and style a interactive & filterable Dynamic Map with location pins all within Webflow.
Ship faster with our new Dynamic Map Webflow Designer Extension
With our brand new Designer Extension you can modify and change your interactive map right within Webflow
All the Features you need in a Map for your Webflow project
We got feedback from our Dynamic Map beta users – and implemented (nearly) every requested feature for you in Dynamic Map
Create custom interactive Map styles in Webflow with Mapbox
Create a custom looking interactive Map for Webflow with Mapbox, selecting one of our multiple and stylish pre-styled map templates or build your own custom map. This makes it easy to choose between different looks for the map for your Website to stand out– and change its look whenever you wish to. You'll still be able to use Google Maps, though, of course.
But you can also use our open source Map provider called OpenStreetMap, if you prefer to not work with a privately owned provider company.
Create custom Location Pins, Price or Name Tags for your Map Items
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 provide a glimpse of information at a simple gaze of your user.
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 and style an interactive Pop-Up & Tooltip for your Map Pins
Create a detailed overview for each location pin on your map with a simple click or hover interaction.
You can connect the Pop-Up and tooltip to your Webflow collection list and allow users to get a quick glimpse of the content you wish them to see.
This makes creating a website for real estate broker or hotel chain a breeze.
Use Google Maps in Webflow to make your map look familiar
With No Code Flow, you can select different Google Maps styles to make sure your map looks familiar to your users.
Google Maps is implementing a new map customization mode, which we will implement as soon as it's getting out, to make sure that your map can use with all the features Google offers right within Webflow.
Connect your Webflow CMS Collection List to an interactive Map
Connect your Map Items to Webflow CMS collection lists and natively load everything from the collection list you want to use. You can also include the Webflow e-commerce feature to build checkout flows or membership sites.
When building the map we automatically connect your CMS fields – so that you're good to go in no time.
Create and style custom Zoom Buttons for your Dynamic Map
Create the zoom behavior that you imagine for your interactive Map. You can style and customize, duplicate and delete your Zoom Buttons in every way you wish to– right within the Webflow Designer.
Search location items on your map using Dynamic Map for Webflow
Allow your users to search for your map items with a search bar filtering through your Webflow CMS Collections List. You can search for any of your text field items within you collection field.
Like this you can build a completely customized and smart search in the backbone of your collection list and Dynamic Map using tag words.
We'll make this search even smarter in the future.
Filter your interactive map with Chips, Checkboxes, and a Range Slider
With Dynamic Map for Webflow, you can filter your dynamic list and map for different criteria using the option field of your Webflow collection list.
You can create different UI approaches to filter for the price with a range slider or using checkboxes or filter chips.
Create Unlimited Items
Although, Webflow limits the amount of displayable CMS items per page to 100 items, you can show as many location items as you wish with Dynamic Map.
Just check out our tutorial to get started.
Our No Code Flow servers are in Europe
With our servers being in Europe, we try to fulfill current privacy standards as good as we can. Depending on your choices when customzing your interactive map, you might still load content from other US-servers provided by companies like Google or tile services for OpenStreetView.
To be 100% GDPR-compliant, we advise consulting a legal expert.
Implement an interactive Map to your Webflow CMS in 3 easy steps
Customize the Dynamic Map features in our Editor, implement into Webflow with 5 clicks and style 100% of the UI in the Webflow CMS
Customize your Map
Select required and wanted features for your interactive Map in our new NCF Editor. Select your Map type and style, connect your CMS Collection List, configure a filter and set custom interactions.
Implement your Map
In a few easy steps, you can copy-paste the dynamic map to your current Webflow projects. No complicated set up and no custom coding!
Style and change
Everything can be styled right within the Webflow Designer to bring you the fastest and best workflow possible. Since our Designer Extension upgrade, you can modify everything about your interactive CMS Map right within Webflow.
Pricing Plans for Dynamic Map by No Code Flow
Free to set up and use until your site is live on a custom domain. You can connect as many Webflow accounts to your No Code Flow account as you want. Each live domain requires a separate seat.
John Theofanopoulos
Frequently Asked Questions about Dynamic Map for Webflow
The most asked questions regarding the Dynamic Map for Webflow
Can I use Dynamic Map for Webflow already?!
Yes, if you sign-up, you are able to use the Map already right here.
Can I try the Dynamic Map for free?
Yes, you can implement the dynamic map on as many websites as you want as long as they are hosted on a Webflow.io domain. Only when you want to launch with a custom domain you need to buy a license plan.
Can I modify my interactive map settings after implementing the map?
Yes, you can implement changes via our new Designer Extension, making the Dynamic Map feel as native as possible within the Webflow universe.
Currently though, we're transitioning from our own NCF interface to the Designer Extension.
Can I customize every UI element of the Dynamic Map?
Yes, you can customize everything. The only limitation is the map itself. For the map itself, we can only provide third-party services. Currently, we feature Google Maps and Open Street Map in different variations. But we're also working on a bunch of other integrations as you can see on our road map.
Can I make my interactive map in Webflow use Google Maps or Mapbox?
Yes, Dynamic Map for Webflow works with Google Maps and Mapbox alike. This allows you to create completely custom styled maps.
For how many different sites can I use the map in Webflow?
You can use the map on as many pages as you want, as long as they are on the same domain. You also can build as many maps on as many Webflow.io domains as you want. Only as soon as you launch on a live domain, you have to buy a license key for each domain that is going to display the dynamic map.
Is it possible to switch the breakpoint for the map?
Yes, all of the styling of the map component happens right within Webflow. This allows you to style everything right within the designer. This includes breakpoints.
Why do you charge on a monthly basis?
Since we plan to consistently add new features, maintain the infrastructure (APIs etc.) and provide ongoing free support and guidance to our users, we're charging on a monthly basis.
Since this is a niche product, this is the only way to keep this project alive and enable us to work further on it.
We're going to offer discounts for non-profits and agencies (if you plan to use the map on multiple projects) though! Feel free to contact us about it.
Also for beta users we'll give a pretty big discount before our official Version 1.0 launch, so make sure to sign up before we go live! :-)
Do I have to update to use the No Code flow designer extension?
No, you can use Dynamic Map by No Code Flow without updating it.
Is there an item limit in the Dynamic Map I should be aware of?
Currently, you will only be able to display 100 items at the same time on the map due to Webflow's own limitations and performance reasons.
Within the next updates, we're going to build in a few features that make it possible for you to implement unlimited items on the map.
You can sign up and start to build an interactive map already and implement coming changes in the future on the fly.
If I implement and buy the map now, can I updated it later?
Yes, we make sure to keep every version compatible with every update, so that you can just implement new features without implementing it again on a live project.
Can I set a custom zoom level for the map?
No, not yet. But we're going to implement that feature withing the next updates.
The default zoom level of the Map contains all existing locations though.
Does the Dynamic Map work with Finsweet or Relume Extensions?
You can use every kind of Webflow tool or application that you like, as long as it doesn't work on the base of attributes. For example, the whole Relume library can be used easily. Also, everything from Flow Base is fine to use. With FinSweet extensions, you need to be careful to not interfere with the JavaScript from our attributions we use to make the map work. Thank you.
Will I be able to create custom pop-ups?
Yes, with our new Dynamic Map for Webflow you can create custom and interactive pop-ups and tooltips, connect them to a collection list and make them interact however you want to.
How can I get started with the implementation?
Just sign-up to No Code Flow to access and implement the dynamic map on your Webflow website. You can also use our clonable to make sure that your map is ready to launch in no time.
Will Google Maps charge me additional fees?
If you do plan to build a website with A LOT of traffic like > 100.000 Google Maps map loads per month, Google might charge you on top of our No Code Flow plan. To avoid this, you can set a limit in your Google Maps cloud admin area to not be charged if the traffic is too high, or use OpenStreetMap as a forever free open source provider which we do feature as an alternative option.
Any fees from Google Maps for your interactive Map in Webflow are NOT included in our No Code Flow plan. However, Google Maps provides its service for free until you reach numerous monthly usage. If you have a "normal website", meaning between 1-100.000 map loads per month you should have no problem with using Google Maps for free.
No Custom Code
We at No Code Flow provide Webflow tools that work without any coding knowledge.
Webflow CMS First
Every component works with the Weblow CMS and can be styled right within the Webflow Designer.
Free Support
We provide E-Mail support using Loom to provide easy to understand and implement help videos.
Ongoing Updates
The money we earn from this project will be reused for maintanance, updates and more No Code Flow tools.
Additional Ressources to get you started with Dynamic Map for Webflow
Take a look a our demo template, which allows you to get started easily, take a look at our new tutorial page or watch the walkthrough of the Dynamic Map for Webflow Beta on Youtube.
.webp)
Real Estate Template
Get started super fast our prestyled Real Estate Template which works with Dynamic Map for Webflow
No Code Flow Help Center
Search and find questions, tipps and tricks about Dynamic Map in our Help Center – or aks our support
Youtube Walkthrough
See our Tutorial on Youtube to take a glimpse at the implementation process.
