@angular/google-maps Marker and Cluster Animation

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.