Getting marker info from markerclusterer

Question

I have pushed markers into the a markerClusterer. When I click on the markerClusterer I want to display the info of the nmarkers in the cluster. However, when I use the getMarkers() method, it does not give me the info that I stored in marker, only data about the marker itself. Is there any way that I can implement this? https://codesandbox.io/s/joey-gmaps-c5kdf

    const markerCluster = new MarkerClusterer(map, [],
      { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });

    google.maps.event.addListener(markerCluster, 'clusterclick', function (c) {
      console.log('Number of managed markers in cluster: ' + c.getSize());
      var m = c.getMarkers();
      for (i in m) {
        console.log(Object.values(m[i]));
        console.log(m[i].getTitle());
        console.log(m[i].toString());
      }
      var p = [];
      for (var i = 0; i < m.length; i++) {
        p.push(m[i]);
      }

    });

Answer 1

You can get your markers' information using getMarkers so there may be an issue somewhere in your code implementation that you haven't posted.

Try the following jsfiddle based off of Google's example.

JS code below:

function initMap() {

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

  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length],
      title: location.lat.toString() + "," + location.lng.toString(),
      myObj: { myKey: i }
    });
  });

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

  google.maps.event.addListener(markerCluster, 'clusterclick', function(c) {
    console.log('Number of managed markers in cluster: ' + c.getSize());
    var m = c.getMarkers();
    for (let i in m) {
      console.log(m[i].getLabel());
      console.log(m[i].getTitle());
      console.log(m[i].myObj.myKey);
    }
  });
}

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
  }
]

If e.g. you click on the blue cluster #3, you'll get the following output logged in the console:

Number of managed markers in cluster: 3
T
-42.734358,147.439506
U
-42.734358,147.501315
V
-42.735258,147.438

Edit: This error appears to be typescript related. There's a solution in related thread custom property with google marker in type script

Please try the code below:

for (var i = 0; i < features.length; i++) {
  const marker2 = new google.maps.Marker({
    position: features[i].position,
    icon: icons[features[i].type].icon,
    animation: google.maps.Animation.DROP,
    map: map
  });
  marker2.set("customInfo", features[i].location);
  console.log("Marker222223", marker2["customInfo"]);
  markerCluster.addMarker(marker2);
}

Hope this helps!