Can Webflow create a map element on a Collection Page that shows multiple locations using latitude and longitude attributes stored in a CMS Collection?
TL;DR
- Store location coordinates in CMS fields and display them using a Collection List on a Collection Page.
- Output each item’s lat/lng using data attributes or hidden elements, then use custom JavaScript with Google Maps or Mapbox to parse the data and render markers on a map.
Webflow cannot natively show multiple map markers from CMS data, but it is possible with custom code using third-party map services like Google Maps or Mapbox. Here's how to do it.
1. Store Location Data in the CMS
- In your CMS Collection, create fields for Latitude and Longitude (e.g., as Plain Text or Number fields).
- Populate each CMS item with accurate coordinates for the location you want to display.
2. Prepare Your Collection Page
- On your Collection Page, add a Map container (use a Div Block with a unique ID, like
id="map"). - Add Webflow CMS Collection List to loop through relevant items.
- Set the Collection List to load all items you want to include as markers—this works only if the items are directly related to the current page (e.g., locations tied to a parent Collection Item via multi-reference or reverse reference).
3. Output CMS Data as JSON using Webflow's Element Attributes
- Inside the Collection List, use custom attributes or hidden elements (e.g.,
<div data-lat="..." data-lng="..." data-title="...">) to expose the latitude/longitude of each CMS item. - You can use Webflow’s native Text Span or Div Block to hold these data attributes from the CMS.
4. Embed Custom JavaScript for the Map
- Add an Embed element on the Collection Page and paste your own custom JavaScript inside.
- Use an external map library like Google Maps JavaScript API or Mapbox GL JS.
- In your script:
- Parse all the data-lat/data-lng elements from the DOM.
- Initialize the map.
- Loop through each location and add markers.
5. Host API Keys Securely
- Use Page Settings > Custom Code to include your API key securely and avoid exposing it in-page when possible.
- For Google Maps, activate the Maps JavaScript API and restrict the key to your domain.
6. Styling and Responsiveness
- Set your
#mapelement to a defined height (e.g., 500px) and make it responsive using Flexbox or relative units. - Make sure your script runs after the page has loaded, using
DOMContentLoadedor placing the script before the closing</body>tag.
Summary
Webflow cannot create multi-location maps from CMS data natively, but you can achieve it using CMS attributes, a Collection List, and custom JavaScript with a third-party map library like Google Maps or Mapbox.