Google Maps api Detect click on marker using markerclusterer

Question

I am trying to detect when I click on any of the markers, I have managed to do it with the clusters, but with the markers it does not detect the click.

I am learning to use the Google maps API, it is quite extensive and what I want is to try to make the map load with many locations and markers and that the user to click on the markers can open a modal window.

Here example: https://jsfiddle.net/milindex/xm2p9rz4/2/

   <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Marker Clustering</title>
        <style>
          /* Always set the map height explicitly to define the size of the div
           * element that contains the map. */
          #map {
            height: 100%;
          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script>

          function initMap() {

            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 3,
              center: {lat: -28.024, lng: 140.887}
            });

            // Create an array of alphabetical characters used to label the markers.
            var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

            // Add some markers to the map.
            // Note: The code uses the JavaScript Array.prototype.map() method to
            // create an array of markers based on a given "locations" array.
            // The map() method here has nothing to do with the Google Maps API.
            var markers = locations.map(function(location, i) {
              return new google.maps.Marker({
                position: location,
                label: labels[i % labels.length]
              });
            });

            // Add a marker clusterer to manage the markers.
            var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
      alert();
    });

    google.maps.event.addListener(markers, 'click', function() {
        alert();
    });

          }
          var locations = [
            {lat: -31.563910, lng: 147.154312},
            {lat: -33.718234, lng: 150.363181},
            {lat: -33.727111, lng: 150.371124},
            {lat: -33.848588, lng: 151.209834},
            {lat: -33.851702, lng: 151.216968},
            {lat: -34.671264, lng: 150.863657},
            {lat: -35.304724, lng: 148.662905},
            {lat: -36.817685, lng: 175.699196},
            {lat: -36.828611, lng: 175.790222},
            {lat: -37.750000, lng: 145.116667},
            {lat: -37.759859, lng: 145.128708},
            {lat: -37.765015, lng: 145.133858},
            {lat: -37.770104, lng: 145.143299},
            {lat: -37.773700, lng: 145.145187},
            {lat: -37.774785, lng: 145.137978},
            {lat: -37.819616, lng: 144.968119},
            {lat: -38.330766, lng: 144.695692},
            {lat: -39.927193, lng: 175.053218},
            {lat: -41.330162, lng: 174.865694},
            {lat: -42.734358, lng: 147.439506},
            {lat: -42.734358, lng: 147.501315},
            {lat: -42.735258, lng: 147.438000},
            {lat: -43.999792, lng: 170.463352}
          ]
        </script>
        <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
        </script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
</html>

score 1 · Accepted Answer · answered Apr 06 '18 at 21:16

You are trying to attach an event listener to an array (markers) rather than the Marker objects themselves:

google.maps.event.addListener(markers, 'click', function() {
  alert();
});

You should move the google.maps.event.addListener() into the locations.map() function and create a click listener on the returned Marker objects.

Here's a simple JSBin adapted from your code. The pertinent code changed:

// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
  position: location,
  label: labels[i % labels.length]
});

google.maps.event.addListener(marker, 'click', function() {
  alert('marker ' + marker.getLabel() + ' clicked');
});

return marker;});

Google Maps api Detect click on marker using markerclusterer

1 Answers1