How can I use the new feature in Webflow to include a Google Map embed for each dynamic record in a directory with hundreds of entries?
TL;DR
- Add your Google Maps API key in Webflow site settings under the Integrations tab with required API access.
- Create CMS fields for either coordinates (latitude/longitude) or full address and populate each CMS item.
- On the CMS template page, add the Map component, then bind it to the relevant CMS location data.
- Adjust map settings like zoom and style as needed, publish the site, and verify maps render correctly for each entry.
To embed a Google Map for each dynamic record in a Webflow CMS (like a directory with hundreds of entries), you can use the new Webflow Maps component added in 2024. This allows you to bind CMS fields to dynamically generate map locations per entry.
1. Add Google Maps API Key
- Go to Site Settings in Webflow.
- Click the Integrations tab.
- Under Google Maps, paste your Google Maps JavaScript API key. Make sure the key has access to the following APIs:
- Maps JavaScript API
- Geocoding API (if using addresses)
- Save your settings.
2. Prepare CMS Collection Fields
- In your directory Collection, create a location field based on your needs:
- If using coordinates: Add two fields for Latitude and Longitude.
- If using addresses: Add a Plain Text field for the full address.
Make sure each CMS item is filled in with valid location data.
3. Use the Maps Component in the Collection Page
- Open the CMS Template Page for your directory items.
- Drag the Map component from the Add panel onto the page.
- Click on the map element to open the settings.
4. Bind Dynamic Map Data
- In the Map settings, bind the Location Source to your CMS field:
- For coordinates: Bind to the Latitude and Longitude fields.
- For addresses: Bind to a single Address field, and Webflow will geocode it.
You can also set the zoom level and map type (roadmap, terrain, etc.).
5. Adjust Map Behavior and Style
- You can resize the map, control zoom, and styles directly within the Map settings.
- Enable or disable markers depending on your design needs.
- Note: Styling (like colors, labels) must be configured via the Google Console or using map styling options.
6. Publish to Test Live Map Functionality
- Publish your site to test that the map renders correctly per dynamic page.
- If you're seeing blank maps or errors, double-check:
- That the API key is active and unrestricted for your domain.
- The location values are correct and formatted properly.
Summary
Use Webflow’s new Map component to dynamically embed Google Maps on each CMS item page by binding map coordinates or address fields from the CMS. Connect your Google Maps API key in settings, configure the dynamic data binding in the component, and then publish to see the map per directory listing.