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 two CMS collections: Companies and Stores, linking each store to a company via a reference field.
- On the Company detail page, display related store data using a Collection List with latitude/longitude exposed via hidden elements.
- Use Google Maps or Mapbox with custom JavaScript to initialize the map, read coordinates, and place pins dynamically.
- Optionally, display store info in map markers using data pulled from the CMS.
Yes, you can create a dynamic map in Webflow to show pins for CMS items like store locations based on a selected company, but it requires custom JavaScript and integration with a map platform such as Mapbox or Google Maps. Here’s how to structure it.
1. Set Up Your Collections
- Create two CMS collections:
- Companies: Contains company names and related fields.
- Stores/Locations: Contains fields like address, latitude, longitude, and a reference field linking each store to a company.
2. Design the Company Detail Page
- Use Webflow’s CMS template page for Companies.
- Maintain a Reference or Multi-reference field linking each store to its parent company, which lets you filter relevant data on the company’s detail page.
3. Embed a Dynamic Map
- Use Google Maps or Mapbox for embedding a map with multiple pins.
- On the Company's detail page:
- Use a Collection List to populate all stores linked to the company.
- For each store, expose the latitude and longitude inside the page using hidden elements (e.g.,
divwith customdata-latanddata-lngattributes) or data script arrays.
4. Add Custom JavaScript
- Add custom JavaScript to:
- Fetch all store coordinates from the page.
- Initialize the map centered appropriately.
- Loop through the store locations and generate pins on the map.
- Example approach:
- Use Webflow’s Page Settings → Custom Code section or an Embed element on the page.
- Load your map API (Google Maps API key required with billing).
5. Optional: Include Store Details in Map Info Windows
- In your loop, attach store-specific info to each marker using the data available in the CMS (e.g., store address, phone number).
- This allows interactive map pins that show details when clicked.
Summary
You can build a dynamic map in Webflow that displays store pins per company using CMS Collections, a filterable collection list, and custom JavaScript to generate map markers. You’ll need to use Google Maps or Mapbox SDKs and integrate them using custom code on the company detail page.