I'm currently utilizing Angular 4, Google Maps v3, and Marker Clusterer v2 - all of which are the latest versions. I'm attempting to implement a straightforward example found in the official Google Maps documentation (https://developers.google.com/maps/documentation/javascript/marker-clustering) to cluster and un-cluster my markers.
Map initialization is nothing out of the ordinary:
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 during initialization generates 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 provided code above contains all relevant information. While my markers do cluster successfully, they fail to uncluster, and I am unsure why. You can find my partially functioning code here: PLUNK, with the code snippets located in the app.ts file.
Edit: The map does uncluster into smaller clusters, but it does not uncluster into individual pins.