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 a "Map Location" text field to your CMS and input addresses or coordinates for each item.
- Use an Embed component in your Collection List, insert a Google Maps iframe with dynamic binding, and replace the static query with your CMS field.
- Enable the Maps Embed API in Google Cloud, use your API key in the iframe's
src, and addloading="lazy"for better performance.
To dynamically embed Google Maps for each collection item in Webflow, you can now use Webflow’s improved embed capabilities within Collection Lists to inject data like an address or coordinates into an iframe embed.
1. Prepare Your Collection with a Location Field
- Add a Text Field to your CMS Collection called something like "Map Location".
- In each Collection item, enter a search-friendly location—either a full address (e.g., "1600 Amphitheatre Parkway, Mountain View, CA") or coordinates (e.g., "37.422,-122.084").
2. Get the Embed Format from Google Maps
- Go to Google Maps and search any location.
- Click "Share" > “Embed a map” and copy the iframe embed code.
- Note that the embed URL will look like:
https://www.google.com/maps/embed?....
3. Use a Webflow Embed Component in Your Collection List
- In your Collection List, drag in an Embed element.
- Replace the hardcoded location in the
srcattribute of the iframe with a Dynamic Embed.
Example:
- Replace:
src="https://www.google.com/maps/embed?...q=STATIC_ADDRESS" - With:
src="https://www.google.com/maps/embed/v1/place?key=YOURKEY&q=TEXTFIELD" - Instead of typing
TEXT_FIELD, click "Add Field" and insert the CMS field you created (e.g., "Map Location").
Important: Use the Google Maps Embed API (not just a directions URL). You'll need an API Key:
- Go to Google Cloud Console, enable the Maps Embed API, and copy your API key.
- Insert your key in the
srclike so:
https://www.google.com/maps/embed/v1/place?key=YOURAPIKEY&q=dynamic_location.
4. Enable loading="lazy" for Performance
- Add the
loading="lazy"attribute within your iframe to improve performance when dealing with hundreds of entries.
5. Publish and Test
- Publish your site and verify that each dynamic item renders the correct Google Map embed.
- Ensure that your API Key has billing enabled and domain restrictions are properly set to avoid failures.
Summary
To embed Google Maps dynamically in Webflow, create a Map Location field in your CMS, use the Embed component inside a Collection List, and dynamically inject the location using the new binding features. Use the Google Maps Embed API with your own API Key and lazy-load maps to keep performance high across hundreds of directory entries.
