How to add click event to Google Map markers stored in an array in JavaScript ?
To add a click event to markers stored in an array, you will first need to iterate over the array of markers using a loop. Then, within the loop, you can bind a click event to each marker.
Syntax:
var markers = [marker1, marker2, marker3]; // Array of markers
for (var i = 0; i < markers.length; i++) {
// Bind a click event to the current marker
markers[i].addListener('click', function () {
// Do something when the marker is clicked
});
}
In this syntax, markers are an array of markers, and we are using a for loop to iterate over the array. Within the loop, we are using the addListener method of the Google Maps API to bind a click event to the current marker. When the marker is clicked, the code within the event listener function will be executed.
Problem Statement: “Design a Google Maps application that allows users to view and interact with a map, displaying a set of markers at specified locations. The application should include the Google Maps JavaScript API and use an array of markers to represent the locations on the map. When a marker is clicked, the application should pop-up alert box”
Approach: To solve this problem, the following steps can be taken:
- Include the Google Maps JavaScript API in the HTML page, using the provided instructions and code snippets.
- Create an array of markers using google.maps.Marker constructor specifies the latitude and longitude coordinates for each marker.
- Use a for loop to iterate over the array of markers, and add each marker to the map using the addListener method of the Google Maps API.
- Within the loop, bind a click event to the current marker using the addListener method, and specify the code that should pop-up alert box when the marker is clicked.
- Test the application to ensure that the markers are displayed correctly on the map and that the specified action is executed when a marker is clicked.
Implementation: Below is the code implementation of the above approach:
HTML
<!DOCTYPE html>
< html >
< head >
< title >Google Maps Markers</ title >
< script src =
</ script >
// You need to pass your own generated map API key
</ head >
< body >
< div id = "map" style = "width: 400px; height: 400px;" ></ div >
< script >
// Create a map
var map = new google
.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: 37.78, lng: -122.41 }
});
// Create an array of markers
var markers = [
new google.maps.Marker(
{
position: {
lat: 37.78,
lng: -122.41
},
map: map
}),
new google.maps.Marker(
{
position: {
lat: 37.76,
lng: -122.43
},
map: map
}),
new google.maps.Marker(
{
position: {
lat: 37.75,
lng: -122.45
},
map: map
})
];
// Iterate over the array of markers
for (var i = 0; i < markers.length ; i++) {
// Bind a click event to the current marker
markers[i].addListener('click', function () {
alert('Marker clicked!');
});
}
</script>
</ body >
</ html >
|
Output:
marker
Overall, the goal of this problem statement is to create a Google Maps application that allows users to view and interact with a map, displaying a set of markers at specified locations. When a marker is clicked, the application should pop up an alert box with information about the location.
Last Updated :
03 Jan, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...