#angular/google-maps Marker and Cluster Animation - google-maps-markers

Question

I'm using Angular's Google Maps library (#angular/google-maps: 13.3.4) and want to animate clusters the same way as markers just when markers are added. This is my code so far:
<google-map height="400px"
width="750px"
[center]="center"
[zoom]="zoom"
>
<map-marker-clusterer [zoomOnClick]="true" [imagePath]="markerClustererImagePath">
<map-marker *ngFor="let markerPosition of markerPositions"
[options]="markerOptions"
[position]="markerPosition"
></map-marker>
</map-marker-clusterer>
</google-map>
<button (click)="addSingleMarker($event)">Add new Marker</button>
<button (click)="addMarkerToCluster($event)">Add new Cluster</button>
Component.ts:
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
center = { lat: 24, lng: 12 };
zoom = 4;
markerPositions = [
{ lat: 24, lng: 12 },
{ lat: 24, lng: 12 },
{ lat: 15, lng: 6 },
];
markerOptions: google.maps.MarkerOptions = {
animation: google.maps.Animation.DROP
};
markerClustererImagePath =
'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';
public addMarkerToCluster($event: google.maps.MapMouseEvent) {
if ($event.latLng !== null) {
this.markerPositions.push({ lat: 24, lng: 12 });
}
}
public addSingleMarker($event: google.maps.MapMouseEvent) {
if ($event.latLng !== null) {
this.markerPositions.push({ lat: 21, lng: 2 });
}
}
}
I would be happy if someone can help me.

Answer 1

Not sure if there is proper way to do so but gonna share my solution which works fine in my case:
<map-marker-clusterer
#markerCluster
>
<map-marker
*ngFor="let marker of markers"
[position]="marker.coordinates"
[options]="marker.options"
>
</map-marker>
</map-marker-clusterer>
Add #markerCluster tag for cluster, than assign it to variable as soon as cluster is via ViewChild setter initialized:
#ViewChild('markerCluster') set markerCluster(cluster: MapMarkerClusterer) {
if (!cluster) return;
this.cluster = cluster;
}
Now you have MapMarkerClusterer object on which you can do some animation via reaching on this.cluster.markerClusterer.getClusters() <-- all the clusters on your map.
Each cluster in this.cluster.markerClusterer.getClusters() have div_, so you can add class of css animation on specific clusters div.