Google Map Markers not on "Un-Clustering"

Viewed 999

I am using Angular 4, Google Maps v3, and Marker Clusterer v2 - so, essentially the latest versions of each respective library. I am trying to follow a simple example (https://developers.google.com/maps/documentation/javascript/marker-clustering) found in the official Google Maps doc to make my markers cluster and un-cluster.

Init the map, nothing special here:

public ngOnInit(): void {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.85, lng: -87.65}
  });
  this.generateMockPinResultsResponse(10000, map);
}

This function called on init just generates a bunch of sample pins:

  public generateMockPinResultsResponse(nMarkers, map): void {
    let component = this;
    var markers = [];
    for (var i = 0; i<nMarkers; i++){
      let latitude: number = this.getRandomUsLat();
      let longitude: number = this.getRandomUsLng();
      var marker = new google.maps.Marker({
        position: { lat: latitude, lng: longitude },
        map: map
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);//
  }

The above is really all the relevant code as far as I know. My markers do cluster but do NOT uncluster, and I don't understand why. My semi-working code is here: PLUNK, the code snippets are from the app.ts file.

Edit: The map does uncluster into smaller clusters, it just doesn't uncluster into individual pins.

3 Answers
Related