Google Map Markers not on "Un-Clustering"

Question

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.

Answer 1

Logging your locations you can see that you are generating a random lng/lat to 0 decimal places, so with 10,000 locations, you will have exact duplicate locations. http://plnkr.co/edit/FWRdHXd2tJbOIRzrvBZj?p=preview

const positions = markers.map(marker => {
  const position = marker.getPosition();

  return {
    lat: position.lat(),
    lng: position.lng(),
})

console.log(positions);

Updating your generator to make better (to 4 decimal places) random locations we can see that it fixes this http://plnkr.co/edit/vMkjrSYqeYoaN4lRRyHa?p=preview

public getRandomInRange (from, to, fixed) {
    return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
  }

  private getRandomUsLat(){
    let max = 48;
    let min = 30;
    let num = this.getRandomInRange(min, max, 4);

    return num;
  }

  private getRandomUsLng(){
    let max = -70;
    let min = -110;
    let num = this.getRandomInRange(min, max, 4);
    return num;
  }

Answer 2

It's not a problem of Angular. Since you have the randomly generated function for lat and long. Somehow it will have more than two markers very close to another. Then the google map library is not able to distinguish between those.

https://embed.plnkr.co/Ww4N71vKe6IUZjHFPLKo/

It was reported on Github as well. See my plunker with only 1000 items and we can manage to see some of the markers, but the problem still persists. People suggest changing the max zoom of the map object. But it will depend on the map type. You can also see the zoom level on the console of my plunker. The maximum it can get into is 22 even I try to hack with 48.

If your real data nead to support the clustering of the very close markers, you might want to take a look at Leaflet.

Quoting from the issue.

This issue, along with many other limitations in the Google Maps API requiring workarounds forced our business away from Google Maps. We're now using Leaflet and Mapbox with great success.