5 Minute Quick Start Guide

In this article, you’ll learn how to set up Dynamic Map for Webflow in your Webflow project in less than five minutes. This is the perfect starting point, ideal for beginners and those new to the tool.

Get Dynamic Map up and running on your Webflow site in under 5 minutes. Follow the 6 steps below to go from installation to a live, interactive CMS map.

Step 1: Install Dynamic Map

Open the Webflow App Store and install the Dynamic Map Webflow App.

Webflow Designer Apps panel showing Dynamic Map by No Code Flow selected in the App Marketplace with the Install on site button highlighted. — Webflow App Store showing Dynamic Map selected, ready to install with one click.

Step 2: Create a No Code Flow Account and connect your site

Click Sign Up Now and create a No Code Flow account at app.nocodeflow.net/register. This account is entirely separate from your Webflow account.

Make sure to confirm your email address to create your account. Check our spam folder.

No Code Flow app project dashboard showing current Webflow projects with the Dynamic Map tab selected and the "Add Dynamic Map" to site button highlighted. — After logging in, click Dynamic Map and then Add Dynamic Map to site to link it to your Webflow project.

Webflow OAuth authorization screen for Dynamic Map by No Code Flow — Webflow OAuth screen. Select your site and click Authorize App to grant Dynamic Map access.

Step 3: Create your Map Items Collection List

Create a map item collection list in Webflow and press Refresh in Dynamic Map App. Your CMS collection must include at least two plain-text fields to make Dynamic Map work: Latitude and Longitude.

Webflow CMS New Collection screen showing Collection Templates with the Create Map Items Collection List with the required fields for Dynamic Map to work: Plain Text Fields for "Latitude" and "Longitude" coordinates — Create a Collection List containing at least two plain text fields for latitude and longitude coordinates

Latlong.net showing how to get from an address to latitude and longitude values for Dynamic Map for Webflow — Get latitude and longitude values from a tool like latlong.net or similiar

Step 4: Create Your Map

Open Dynamic Map App inside Webflow and log in using your No Code Flow credentials.
Connect your collection list to Dynamic Map and link the CMS item to your collection list.
Insert the code snippet into a list item code embed in Webflow Designer.
Connect the Pop-Up and Tooltip collection list in Dynamic Map App.

Dynamic Map App open in Webflow Designer showing the "Insert Map" map button to get started creating a new CMS map — Log in to Dynamic Map App and start the Create New Map process

Dynamic Map App Create New Map flow showing how to connect the Map Item List collection list. — Connect your Map Items collection list in the Webflow Designer

Webflow Designer Code Embed Editor open inside the map item list element, showing where to paste the Dynamic Map code snippet. — Paste the Dynamic Map code snippet into the Code Embed element inside your map item list.

Dynamic Map App Create New Map flow showing how to connect the Pop-Up and Tooltip collection list. — Connect the same CMS Map Items collection to your Pop-Up and Tooltip list in the Webflow Designer

‍

Step 5: Customize Your Map

Choose a Map Provider

Select from 4 map providers to define your map's visual style:

MapLibre — The default provider. Free and open-source, no usage limits, no billing. A fork of Mapbox delivering the same high-performance vector tiles.
Open Street Map — Free, community-maintained tile provider.
Google Maps — Requires a Google Cloud Console API key. See the Google Maps setup guide.
Mapbox — Fully custom-styled maps via Mapbox Studio. Sign up for Mapbox here.

Customize Interactions

Add pop-ups on click, tooltips on hover, or a custom start zoom position in the Interactions panel.

Set Up Filter and Sorting

Add category filters, text search, address search, or list sorting in the Filter and Sorting panel.

Press Save to apply all your settings.

Dynamic Map App open in Webflow Designer showing Map Settings with Map Provider set to MapLibre and Liberty style, with Interactions, Filter and Sorting, and Add-Ons sections ready to configure. — Dynamic Map App settings panel. Choose a map provider, configure interactions, and set up filters to customize your map – don't forget to press save afterwards to apply changes

Step 6: Publish Your Map

Click Publish in Webflow to make your map live. 🎉

💡 Next step: Visit Style Map Elements and State Types to customise the look of your pins, pop-ups, filter chips, and more.

Webflow Designer Publish dialog showing Staging and Production domain options with the Publish to selected domains button highlighted and a Publish Webflow project annotation. — Click Publish in Webflow to bring your map live on your staging domain

A CMS-connected map, with an item list on the left and an interactive map of New York City on the right after first setting up Dynamic Map. — Your map is live! You create your first interactive CMS-connected map and published it to your Webflow site. Great job!

Step 7: Add map items, style your map and go live!

Now you can start adding new items to your map, adding features like category filters, start styling your map and get a license to key to go live on your live domain!

Style Map Elements and State Types

Map Location Pins

Map Item CMS List

License Settings