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?

Yes, you can create a dynamic map in Webflow that displays pins based on CMS collection items (e.g., showing multiple store locations for a selected company). However, it requires custom JavaScript and an external map service like Google Maps or Mapbox, as Webflow does not support native dynamic maps with CMS integration.

1. Create Your CMS Structure

• Company Collection: Include fields like Name, Description, and a Reference field to link to multiple Stores.
• Stores Collection: Include fields like Store Name, Address, Latitude, and Longitude. Make sure each store item is linked to a Company via the Reference field.

2. Design the Company Template Page

• Use Webflow’s CMS page templates to design the Company Details page.
• Add a container for the map, such as a div with the ID “map”.

3. Add Map Platform (Google Maps or Mapbox)

• Sign up for Google Maps API or Mapbox and copy your API key.
• Embed the map script using the Webflow Embed element, and include your API key (usually in the before </body> custom code area in Project Settings or inside a page Embed block).
• Example setup: load the JavaScript API for your selected map service using their documented CDN instructions.

4. Load CMS Store Data into the Map

• Use Webflow’s CMS Lists (e.g., a hidden Collection List for Stores) filtered based on the current Company.
• Inside each list item, include the Latitude and Longitude as data- attributes on a simple element like a div.

Example:

• Create a div with class="store-location" and custom attributes like:
• data-lat="47.6205"
• data-lng="-122.3493"

5. Add Custom JavaScript to Generate the Pins

• In an Embed element at the bottom of the Company page or in the Page Settings > Before , write JavaScript to:
• Initialize the map (centered on a default or computed location).
• Loop over all .store-location elements.
• Read the data-lat and data-lng values.
• Place pins/markers for each store on the map.

6. Optional: Add Store Info to Each Pin

• You can also include extra CMS fields (like Store Name or Address) in data- attributes.
• Then use those values to display info windows when a pin is clicked.

Summary

While Webflow doesn’t natively support dynamic maps linked to CMS data, you can integrate Google Maps or Mapbox and use custom JavaScript to dynamically read store data from CMS Collection Lists. This allows you to display pins for multiple stores tied to a selected company on its detail page.