Is it possible to create a dynamic list in Webflow and use it to link to Google Maps, similar to the hyperlink in the provided image?
TL;DR
- Create a Webflow CMS Collection with an address field for each location.
- Add a Collection List to your page and bind dynamic elements like names and links.
- Use a dynamic link with the format
https://www.google.com/maps/search/?api=1&query=[address]to open each location in Google Maps.
You can absolutely create a dynamic list in Webflow using a CMS Collection and link each item to Google Maps dynamically, based on location data stored in the CMS.
1. Set Up Your CMS Collection
- Go to CMS in your Webflow project and Add a New Collection (e.g., “Locations”).
- Add relevant fields such as:
- Name (e.g., Business or Place Name)
- Address or Location field (text format for direct control or Address field for map use)
- Any other content (image, description, etc.)
2. Create a Dynamic List on the Page
- Drag in a Collection List onto your page.
- Connect it to the newly created Locations Collection.
- Inside the Collection List item, add design elements like Text Blocks for names and Links for map access.
3. Add a Dynamic Map Link
- Add a Link Block or Text Link.
- Choose Get URL from a field.
- Set the URL using this format:
- https://www.google.com/maps/search/?api=1&query=
[Address Field] - For example, if your CMS Address Field is called “address”, the full value will be:
https://www.google.com/maps/search/?api=1&query=[address]
4. Format the Address Field Correctly
- Ensure your address is stored in a way that Google Maps can recognize (e.g., “1600 Amphitheatre Parkway, Mountain View, CA”).
- Webflow will automatically URL encode the string in the dynamic link.
5. Optional: Open Link in New Tab
- Select your hyperlink and check Open in new tab in the Element Settings panel.
Summary
You can create a Webflow CMS Collection for locations and dynamically link each item to Google Maps using a custom URL format like https://www.google.com/maps/search/?api=1&query=[address]. Just make sure your address field is properly formatted.
