Is it possible to create a dynamic map on Webflow to display a list of pins for each item in a collection, such as selecting a company, showing its details on a new page, and displaying its stores as pins on a map?
TL;DR
- Create Companies and Stores CMS Collections with a reference linking stores to their parent company.
- On each Company Template Page, embed a custom map (e.g., Google Maps or Mapbox) using JavaScript to read store coordinates from Collection Lists and generate dynamic pins.
Yes, it’s possible to build a dynamic map in Webflow that shows multiple pins based on Collection items, such as store locations for a selected company.
1. Structure Your CMS Collections
- Create a Companies Collection with relevant fields like name, slug, and logo.
- Create a Stores Collection with fields such as:
- Store Name
- Address or Coordinates (Latitude/Longitude)
- Reference Field linking each store to a Company.
This will let you associate multiple stores with a single company.
2. Design Your Template Page
- On the Companies Template Page, add the layout for company details.
- Leave space for embedding a map that will display that company’s associated store pins.
3. Use a Mapping Tool with Dynamic Access
Webflow doesn’t have native map filtering, so you'd need a mapping solution like:
- Google Maps API
- Mapbox
- Embed via JavaScript and custom attributes
Because Webflow CMS can't render dynamic map pins by default, you’ll need to use a map service with an iframe or embed custom JavaScript code.
4. Embed Custom Code for the Map
- For Google Maps with JavaScript, fetch store data from the CMS using Webflow's
data-attributesor via a script embedded in the Page Settings > Footer. - Loop through store locations linked to the current company and generate map markers dynamically using JavaScript.
- You’ll need to expose store coordinate fields in the page DOM using Collection Lists, then read them via JavaScript (e.g., using
data-lat,data-lng).
5. Hosting External Store Data (if needed)
- If your store data volume is large, consider enabling a CMS API proxy or hosting the data externally (e.g., via JSON/CSV in Airtable or Firebase) and fetch/display with JavaScript.
6. Use Tools Like Jetboost or Wized (Optional)
- You can use tools like Wized + Xano or Jetboost (for filtering only) to create more advanced interactions if you don’t want to write custom code.
Summary
You can absolutely create a dynamic store map for each company in Webflow by linking stores via CMS and embedding a custom map (Google Maps or Mapbox) that reads store coordinates and displays pins. The key part is using JavaScript to turn CMS data into map markers per company detail page.