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. — Step 1 — 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 dashboard showing Current Webflow projects with the Dynamic Map tab selected and the Add Dynamic Map to site button highlighted. — Step 2 — 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 listing read and write permissions, with NCF Dynamic Map Demo selected as the Webflow site to authorize. — Step 2 — 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 two plain-text fields: Latitude and Longitude.

Dynamic Map App open in Webflow Designer showing the Map Overview panel with Create New Map and Insert Map buttons, used to start the map creation process. — Step 3 — Open Dynamic Map App in Webflow and click Create New Map to begin.

Webflow CMS New Collection screen showing Collection Templates with the Create Map Items Collection List template highlighted for selection. — Step 3 — Choose the Create Map Items Collection List template to scaffold the required CMS fields automatically.

Webflow CMS collection editor for CMS Map Items showing the Collection Name field filled in and two required custom Plain Text fields — Latitude and Longitude — being added. — Step 3 — Set the collection name to CMS Map Items and add two Plain Text custom fields: Latitude and Longitude.

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 Create New Map setup panel with Select CMS, Connect List, Insert Code and Connect Add-Ons steps visible. — Step 4.1 — Log in to Dynamic Map App and start the Create New Map wizard.

Dynamic Map App Create New Map flow showing the CMS Map Items collection being selected from the dropdown and connected, with a Collection List Connected confirmation message. — Step 4.2 — Select your CMS Map Items collection list in Dynamic Map App and confirm the connection.

Webflow Designer Code Embed Editor open inside the map item list element, showing the Dynamic Map code snippet highlighted and ready to be pasted. — Step 4.3 — Paste the Dynamic Map code snippet into the Code Embed element inside your map item list.

Dynamic Map App Create New Map flow showing the Pop-Up and Tooltip collection list being connected, with CMS Map Items selected and a Collection List Connected confirmation visible. — Step 4.4 — Connect the same CMS Map Items collection to your Pop-Up and Tooltip list in Dynamic Map App.

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.