Can Webflow create a map element on a Collection Page that shows multiple locations using latitude and longitude attributes stored in a CMS Collection?

Yes, Webflow can display a map with multiple locations on a Collection Page using latitude and longitude stored in CMS fields—but it requires custom code.

1. Add Latitude & Longitude Fields to Your CMS Collection

• Go to CMS > Collections and select the collection you want.
• Create two Plain Text fields: one for Latitude and one for Longitude (e.g., "Lat", "Lng").
• Add coordinates for each item (e.g., store, office, event location).

2. Create a Map Container on the Collection Page

• On your Collection Page, add a Div Block that will hold the map.
• Give it a unique ID like "map".
• Style it with a fixed height and width so it renders correctly (e.g., height: 400px).

3. Pass CMS Location Data to the Page using Embed Elements

• Still on the Collection Page, add an Embed component inside the Page Wrapper or Body.

• Insert a JSON object or data attributes using inline CMS fields, for example:

• JSON Method:

  • In the custom Embed code, generate a script tag that pushes the latitude and longitude into a JavaScript array or object.
  • Example:
    ``
  • This assumes you’ve stored all your location data in a field and parsed it.

• Data Attributes Method (for listing multiple items):

  • Use the Collection List component on a static page, and for each item, output:
    <div class="location" data-lat="{{Latitude}}" data-lng="{{Longitude}}"></div>

• Note: You can't dynamically generate multiple locations on a Collection Page from other items directly in Webflow alone—you’ll need to preload all data from a multi-reference field or external source.

4. Add Custom JavaScript for the Map

• Integrate a mapping library such as Google Maps JavaScript API or Mapbox.
• In the Footer section of the Page’s Page Settings, add the custom JavaScript to:
• Initialize the map in the "map" div.
• Loop through the DOM elements (or JSON array) to extract coordinates.
• Drop pins at each location.

5. Use a Static Page for Multiple Pins (Alternative)

• If your goal is to show multiple CMS items on one map, consider placing a Collection List on a static page, not a Collection Page.
• Filter or sort Collection items as needed and pass each location using data attributes.
• Then use custom JavaScript to read those and populate the map.

Summary

Webflow cannot natively generate multi-location maps using only CMS data on a Collection Page, but you can add this functionality with custom code by embedding latitude and longitude and using a mapping API like Google Maps or Mapbox. For multiple pins, a static Collection List page is more appropriate.