1

I am using Google Map Clustering and opening Info Windows after clicking on particular cluster using clusterclick which is working absolutely fine.

However, when I have single location, its not going inside clusterclick event and hence I am unable to open my Info Window.

I am trying to add below events but its not firing when I have single location as data. 

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

                    })(markers));

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

Here is my full source code (I have not added Info Window code because as of not even above events not firing).

<div id="map"></div>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"> 
</script>



<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<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';


  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

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

                    })(markers));

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

  // 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',
       gridSize: 100,
  zoomOnClick: true,
  maxZoom: 10});

  google.maps.clusterclick.addListener(markerCluster, "clusterclick", function(cluster, event) {
      alert('hey');
  });
}
var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
    {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
    {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312}
];

initMap();
</script>

<style>
    #map {
  height: 100%;
}
</style>

If I change my locations array to something like this. 

var locations = [
  {lat: -31.563910, lng: 147.154312}, 
];

Then my clusterclick not firing as well as markers click event.

Also I am getting an error saying..

TypeError: google.maps.clusterclick is undefined

But I can have records like this.

Can someone guide me what I am doing wrong here ? Why its not working with single location ?

Mittul At TechnoBrave
  • 1,142
  • 3
  • 25
  • 70
  • 1
    `markers` is an array of `google.maps.Marker` objects. You can't add the listener on the array. You have to loop your array and add the listener to each `Marker` individually. Something like [this](http://jsfiddle.net/upsidown/4k4d5vtL/) except that here the markers are created within the loop but I suppose you get the idea. – MrUpsidown Jan 23 '19 at 14:19
  • There is a javascript error with the posted code: `(index):94 Uncaught TypeError: Cannot read property 'addListener' of undefined` (this line: `google.maps.clusterclick.addListener(markerCluster, "clusterclick", function(cluster, event) {`, that isn't valid) – geocodezip Jan 23 '19 at 14:23
  • possible duplicate of [Array.prototype.map() method add infowindow](https://stackoverflow.com/questions/39838899/array-prototype-map-method-add-infowindow) – geocodezip Jan 23 '19 at 14:27

1 Answers1

1

In the code you posted, markers is an array of google.maps.Marker objects. You can't add the listener on the array. You have to loop through your array and add the listener to each Marker individually.

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';

  var locations = [{
      lat: -31.563510,
      lng: 147.154312
    },
    {
      lat: -31.563610,
      lng: 147.154312
    },
    {
      lat: -31.563710,
      lng: 147.154312
    },
    {
      lat: -31.563810,
      lng: 147.154312
    }
  ];

  var markers = [];

  var infowindow = new google.maps.InfoWindow();

  for (var i = 0; i < locations.length; i++) {

    var marker = new google.maps.Marker({
      position: locations[i],
      map: map,
      label: labels[i % labels.length]
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent('Label: ' + this.getLabel());
      infowindow.open(map, this);
    });

    markers.push(marker);
  }

  // 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',
    gridSize: 100,
    zoomOnClick: true,
    maxZoom: 10
  });
}


initMap();
#map {
  height: 200px;
}
<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
MrUpsidown
  • 21,592
  • 15
  • 77
  • 131