Yes, it is possible to create a dynamic map on Webflow to display a list of pins for each item in a collection. Here's a step-by-step guide on how you can achieve this:
1. Create a Collection
- In the Webflow CMS, create a Collection to store the company details, including the latitude and longitude coordinates for each store location.
- Add fields for company name, description, address, latitude, longitude, and any other relevant information.
2. Design the Company Detail Page
- Create a new page template to display the details of each company.
- Design the layout with the necessary elements to showcase the company's information, such as name, description, address, and any other pertinent data.
3. Set Up the Dynamic Link
- On your main page (where the list of companies will be displayed), create a dynamic list to fetch the collection items.
- Within the dynamic list, add a link block that will lead to the corresponding company's detail page.
- Set the link block's destination to the company detail page and connect it to the dynamic list's current company item.
4. Design the Map Page
- Create a new page template to display the map and pins for each company's store locations.
- Add a map element to the page using the built-in Webflow map component.
5. Add Pins to the Map
- In the map settings, connect the map to the collection that contains the company details.
- Use the latitude and longitude fields from the collection to position the pins on the map.
6. Display Store Details on the Map
- Customize the map marker element to display information about each store when clicked.
- Add interactions that display a store's details, such as name, address, and other relevant data.
- You can achieve this by using interactions to show and hide elements on the page based on user interactions with the map markers.
7. Test and Publish
- Preview and test your dynamic map functionality to ensure that the pins and the associated company details are displaying correctly.
- Publish your site to make the dynamic map live and accessible to your users.
By following these steps, you'll be able to create a dynamic map on Webflow that displays a list of pins for each item in a collection, allows users to select a company, displays its details on a new page, and shows its stores as pins on the map.