How can I add multiple markers on a Google Map using Webflow and the Google Maps API?
- Set up a project in Google Cloud Platform, enable the Maps JavaScript API, and generate a restricted API key.
- In Webflow, add the Google Maps script with your API key in the Custom Code section, and include JavaScript code to initialize the map and add markers.
- Design a map element in Webflow with a matching ID, style it as needed, and publish your site to view the map with multiple markers.
To add multiple markers on a Google Map in Webflow using the Google Maps API, follow these structured steps:
1. Set Up Your Google Cloud Platform
- Sign in to your Google account and go to the Google Cloud Console.
- Create a new project if you don't have one already.
- Go to the API & Services dashboard and enable the Maps JavaScript API.
2. Generate an API Key
- From the credentials page, create a new API key.
- Restrict your API key to prevent unauthorized use by setting applications or websites allowed to use it.
3. Add the Google Maps Script in Webflow
- Open your Webflow project and go to the Project Settings.
- Under the Custom Code tab, add the following script in the Footer Code section:
- Script:
```html
<script src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY"></script>
<script>
function initMap() {
var locations = [
{ lat: 37.7749, lng: -122.4194, title: 'San Francisco' },
{ lat: 34.0522, lng: -118.2437, title: 'Los Angeles' },
{ lat: 40.7128, lng: -74.0060, title: 'New York' }
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: locations[0]
});
locations.forEach(function(location) {
new google.maps.Marker({
position: { lat: location.lat, lng: location.lng },
map: map,
title: location.title
});
});
}
document.addEventListener('DOMContentLoaded', initMap);
</script>
```
- Replace
YOURAPIKEYwith your actual API key.
4. Design the Map Element in Webflow
- Drag a Div Block onto your Webflow page from the Add panel.
- Set the ID to
mapto match thedocument.getElementById('map')reference in your code. - Style the Div Block to your desired size and make sure it’s visible on the page.
5. Publish and Test
- Publish your Webflow project.
- Visit your live site to verify that the Google Map loads with multiple markers in the specified locations.
Summary
To display multiple markers on a Google Map in Webflow, obtain a Google Maps API key, add the Google Maps script to your Webflow project, and implement the JavaScript code to initialize the map and markers. Ensure the map is visible by correctly setting up your div structure and styling in Webflow.
