Dynamic Map

How to integrate Dynamic Map with Webflow

Location-based features like store locators, property finders, and travel guides typically require custom code or restrictive iFrame embeds. Dynamic Map is a native Webflow application that reads location data directly from your CMS collections and displays pins that update automatically when content changes.

Install the marketplace app for a no-code setup, or use Webflow's CMS API v2 for programmatic location management through real-time sync and bulk imports.  

Use the Dynamic Map

The Dynamic Map installs directly from the Webflow App Marketplace without requiring embed codes or external scripts. Once installed, connect your CMS collection containing location data, configure your map provider (Google Maps, Mapbox, or OpenStreetMap), and customize the appearance using Webflow's standard styling tools.

The app supports the following features when connected to your CMS:

• CMS-connected location pins that update automatically when you add, edit, or remove CMS items  
• Interactive filters including address search, text search, category checkboxes, and range sliders configured through the app's interface  
• Custom map styling using pre-built themes or custom styles from Mapbox Studio or Google Maps styling  
• Pop-ups and tooltips with images, descriptions, and links using drag-and-drop controls  
• Custom marker icons uploaded on a per-CMS-item basis for differentiating between location types

The app supports over 1,000 map items with good performance, and recommends clustering for larger datasets. You can test all features free on Webflow staging domains before deploying to production.

Build with Webflow and Dynamic Map API

Dynamic Map doesn't expose its own API endpoints. Instead, all programmatic integration happens through Webflow's CMS API v2, and the app monitors this API for changes. This means you manage location data using standard Webflow API patterns while the app handles map rendering automatically.

Manage location data programmatically

Use the CMS API to create, update, and publish location items that appear on your maps. Your CMS collection needs fields for name, latitude (Number type), longitude (Number type), and any additional data for pop-ups.

• List collection items with GET /v2/collections/{collection_id}/items to retrieve all locations  
• Create location items with POST /v2/collections/{collection_id}/items to add new map pins  
• Update existing locations with PATCH /v2/collections/{collection_id}/items/{item_id} to modify coordinates or details  
• Publish changes with POST /v2/collections/{collection_id}/items/{item_id}/publish to make updates visible

All requests require bearer token authentication with cms:read and cms:write scopes. See the REST API introduction for token setup details.

Sync locations in real-time with webhooks

For applications that need immediate map updates, configure Webflow webhooks. Three CMS-related events are available for map location synchronization:

• collection_item_created fires when a new location is added  
• collection_item_changed fires when location details are modified  
• collection_item_deleted fires when a location is removed

Webhook payloads from CMS changes include the full fieldData object with coordinates and custom fields. Verify webhook authenticity using the x-webflow-signature header.

What you can build

Integrating Dynamic Map with Webflow lets you create location-based experiences that stay in sync with your CMS content.

• Real estate property finders: Build Airbnb-style property maps with price range filters and property type checkboxes, and create synchronized list/map views where clicking a listing highlights its map location  
• Multi-location store locators: Create searchable retail maps where customers filter by services offered, search by address, and view store hours and contact details in interactive pop-ups  
• Interactive travel guides: Design destination discovery experiences with category-filtered attractions, custom pins to distinguish hotels from restaurants from activities, and rich pop-up content with booking links  
• Member or business directories: Display organization members or partner businesses on filterable maps with text search and detailed profile information in interactive tooltips