Selecting cluster objects on click

Question

I found some examples of interacting with the cluster life-cycle events however the markers returned are useless. I get an array of ._$f values without the objects they are referencing. With marker click I don't have this issue. Is there are way to get all objects and their values from clicking on a cluster? I'm using angular-gm and MarkerClusterer for Google Maps v3 for reference.

google.maps.event.addListener($rootScope.mc, 'clusterclick', function(cluster) {
  var c = cluster.getCenter();
  var m = cluster.getMarkers();
  var s = cluster.getSize();
  console.log(c, m, s, 'cluser hook', cluster)

  var content = '';

  // Convert lat/long from cluster object to a usable MVCObject
  var info = new google.maps.MVCObject;
  info.set('position', cluster.center_);

  //----
  //Get markers
  var markers = cluster.getMarkers();
  console.log(Object.keys(markers[0]), '??');
  var titles = "";
  //Get all the titles
  for (var i = 0; i < markers.length; i++) {
    titles += markers[i].getTitle() + "\n";
  }
  //----


  var infowindow = new google.maps.InfoWindow();
  infowindow.close();
  infowindow.setContent(titles); //set infowindow content to titles
  infowindow.open(map, info);
});

The cluster is implemented with a directive:

link: function (scope, element, attributes, controller) {
  scope.$on('gmMarkersUpdated', function (event, objects) {
    if (objects === attributes.gmObjects) {
      if (!$rootScope.markers) {
        var markers = [];

        // this doesn't work because this is scope 4 and I need scope 5 (for this particular example)
        // controller.forEachElementInScope('marker', scope.$id, function(element, id) {
        // });
        //console.log(scope, element, attributes, controller, event, objects, 'directive');
        controller.forEachElement('marker', function (element, id) {
            markers.push(element);
        });

        // numMarkers = markers.length;
        $rootScope.markers = markers;
        $rootScope.mc.clearMarkers();
        $rootScope.mc.addMarkers($rootScope.markers);

      }
      else {
        // use repaint() to avoid bad flickering
        $rootScope.mc.repaint();

      }
    }
  });
}

Created in controller:

$rootScope.mc = new MarkerClusterer(gmap, [], { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

Directive:

          <gm-markers
              gm-objects="filteredItems"
              gm-id="object.id"
              gm-position="{ lat: object.location.lat, lng: object.location.lng }"
              get-markers
              gm-marker-options="options.marker(object)"
              gm-events="markerEvents"
              gm-on-click="triggerOpenInfoWindow(object,  marker)">
          </gm-markers>

Answer 1

The solution in Angular using AngularGM is to update the directive 'gmMarkers' and assign data to the title or label property. Those are the only properties on the marker in this example with exposed getters and setters.