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?

You can now leverage Webflow’s improved dynamic embed capabilities to include a unique Google Map embed for each entry in a Collection List using item-specific location data stored in your CMS.

1. Store Location Data in the CMS

• In your Webflow CMS Collection, add a Plain Text or Map Embed field to store each item's location.
• Use one of the following:
• Full address (e.g., “1600 Amphitheatre Parkway, Mountain View, CA”)
• Coordinates (e.g., “37.4220,-122.0841”)

2. Get a Google Maps Embed Link Format

• Use this base URL format for embedding basic maps:
• https://www.google.com/maps?q=[YOUR-LOCATION]&output=embed
• Replace [YOUR-LOCATION] with a dynamic CMS field (explained next).

3. Add an Embed Element to the Collection List

• Go to the Collection Page or use a Collection List on a static page.
• Drag in an Embed element where you want the map to appear.

4. Bind the Embed to Dynamic Fields

• In the Embed code, paste the iframe format:
• <iframe src="https://www.google.com/maps?q=**ADD_DYNAMIC_LOCATION_HERE**&output=embed" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
• Highlight ADD_DYNAMIC_LOCATION_HERE, then click + Add Field, and choose your CMS field containing the address or coordinates.

5. Save and Publish

• Webflow will automatically generate a unique map for each entry using its location.
• Publish your site and test a few entries to confirm the correct maps are showing.

Summary

Use a dynamic Embed element within your CMS-based Collection List to inject a unique Google Maps iframe based on each item's stored location. This feature lets you display hundreds of custom maps without custom code or third-party plugins.