How to add click event to Google Map markers stored in an array in JavaScript ?

0 0 2 minutes read

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= 
"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> 
    </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.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!