How can I create a map on a website using Webflow, JavaScript, Collection Lists, and Google Maps API?

To create a map on a website using Webflow, JavaScript, Collection Lists, and the Google Maps API, follow these steps:

1. Set up the Google Maps API:
- Go to the Google Cloud Platform Console and create a new project.
- Enable the Maps JavaScript API and the Geocoding API.
- Create an API key.

2. Create a new Webflow project or open an existing one.

3. Set up the HTML structure:
- Add a section or a container to your Webflow page where the map will be displayed.
- Give it a unique class name or ID for targeting with JavaScript.

4. Add the JavaScript code:
- Create a new JavaScript file using your preferred code editor or use Webflow's built-in custom code panel.
- Import the Google Maps API by adding the following script tag before the closing tag:
``
- Replace `YOUR_API_KEY` with the API key you obtained from the Google Cloud Platform Console.
- Write the JavaScript code to initialize the map and add markers:

   \`\`\`javascript   function initMap() {      // Create a new map centered on a specific location      const map = new google.maps.Map(document.getElementById('map-container'), {        center: { lat: 37.7749, lng: -122.4194 }, // Coordinates for San Francisco (example)        zoom: 13, // Initial zoom level      });      // Fetch data from a Collection List      fetch('/YOUR\_COLLECTION\_LIST\_URL')        .then(response => response.json())        .then(data => {          data.forEach(item => {            const marker = new google.maps.Marker({              position: { lat: item.latitude, lng: item.longitude }, // Coordinates from Collection List item              map: map,              title: item.title, // Marker tooltip text            });          });        })        .catch(error => console.log(error));    }    \`\`\`

- Replace `'map-container'` with the class or ID name of the map container element in your HTML structure.
- Replace `'/YOUR_COLLECTION_LIST_URL'` with the URL where you retrieve your collection list data from Webflow's API or another data source.
- Customize the map's initial center coordinates, zoom level, and marker properties as needed.

5. Style the map container:
- In Webflow's Designer, go to the Styles panel and edit the class or ID for the map container element.
- Adjust the width, height, and other CSS properties to fit your design.

6. Publish your site and test the map:
- Preview or publish your Webflow site and ensure that the map is loading correctly.
- Verify that the map markers appear at the specified locations based on the data in your collection list.

By following these steps, you should be able to create a map on your Webflow website using JavaScript, Collection Lists, and the Google Maps API. Remember to replace any placeholder values with your own data and customize the map's appearance to match your website's design.