bug(google-maps): How to use SuperClusterAlgorithm with options with google-maps cluster?

[xbit18]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hello, last year I filed an issue (#30466) because we could not use the SuperClusterAlgorithm from marker-clusterer library, and it was closed as completed and solved. Now I'm using the library again, I am on version 20.2.14 and still when I try to do this I receive an error.

import { SuperClusterAlgorithm } from '@googlemaps/markerclusterer';
algorithm = new SuperClusterAlgorithm({maxZoom: 15, radius: 60});

<google-map
        height="100%"
        width="100%"
        [center]="center"
        [mapId]="'deviceMap'"
        [zoom]="zoom"
        (boundsChanged)="change$.next()"
    >
      <map-marker-clusterer [algorithm]="algorithm">
          @for(marker of markers(); track marker.id) {
              <map-advanced-marker [position]="marker.position" />
          }
      </map-marker-clusterer>
      
  </google-map>

Error I receive is:

Type 'SuperClusterAlgorithm' is not assignable to type 'Algorithm'.
The types of 'calculate(...).clusters' are incompatible between these types.
Type 'import("c:/Users/g.sfratato/Documents/Progetti/pln-iot-control-room-fe/node_modules/@googlemaps/markerclusterer/dist/cluster").Cluster[]' is not assignable to type 'import("c:/Users/g.sfratato/Documents/Progetti/pln-iot-control-room-fe/node_modules/@angular/google-maps/index").Cluster[]'.
Type 'import("c:/Users/g.sfratato/Documents/Progetti/pln-iot-control-room-fe/node_modules/@googlemaps/markerclusterer/dist/cluster").Cluster' is not assignable to type 'import("c:/Users/g.sfratato/Documents/Progetti/pln-iot-control-room-fe/node_modules/@angular/google-maps/index").Cluster'.
Type 'Cluster' provides no match for the signature 'new (options: ClusterOptions): Cluster'.

Am I missing something? From the docs I can't understand how one is supposed to use the Algorithm input

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-vyxqvcee?file=src%2Findex.html
Steps to reproduce:

1. Create map component
2. Import google map component and add to html
3. Import marker clusterer component and add to html
4. Create new algorithm object by importing SuperClusterAlgorithm from @googlemaps/markerclusterer like

algorithm = new SuperClusterAlgorithm({maxZoom: 4})

5. Use the created algorithm as input for the algorithm option of marker clusterer

<map-marker-clusterer [algorithm]="algorithm">
    @for(marker of markers(); track marker.id) {
        <map-advanced-marker [position]="marker.position" />
    }
</map-marker-clusterer>

Expected Behavior

Algorithm works and is customizable

Actual Behavior

Error is returned which says

Type 'SuperClusterAlgorithm' is not assignable to type 'Algorithm'.
  The types of 'calculate(...).clusters' are incompatible between these types.
    Type 'import("censored-folder/node_modules/@googlemaps/markerclusterer/dist/cluster").Cluster[]' is not assignable to type 'import("censored-folder/node_modules/@angular/google-maps/index").Cluster[]'.
      Type 'import("censored-folder/node_modules/@googlemaps/markerclusterer/dist/cluster").Cluster' is not assignable to type 'import("censored-folder/node_modules/@angular/google-maps/index").Cluster'.
        Type 'Cluster' provides no match for the signature 'new (options: ClusterOptions): Cluster'.

Environment

• Angular: 20.3.13
• CDK/Material: @angular/google-maps 20.2.14
• Browser(s): Microsoft Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[xbit18]

I don't know if it can help, but I solved it locally by creating this custom class that bridges the two, and now it seems to work.

import type { Algorithm as AngularAlgorithm, AlgorithmInput as AngularAlgorithmInput, AlgorithmOutput as AngularAlgorithmOutput, Cluster as AngularCluster } from "@angular/google-maps";
import { SuperClusterAlgorithm, type SuperClusterOptions } from "@googlemaps/markerclusterer";

export class CustomSuperClusterAlgorithm implements AngularAlgorithm {
  private algorithm: SuperClusterAlgorithm;

  constructor(options?: Partial<SuperClusterOptions>) {
    this.algorithm = new SuperClusterAlgorithm(options ?? {});
  }

  calculate(input: AngularAlgorithmInput): AngularAlgorithmOutput {
    const result = this.algorithm.calculate(input);
    
    // Cast the MarkerClusterer Cluster[] to Angular Cluster[]
    return {
      ...result,
      clusters: result.clusters as unknown as AngularCluster[],
    };
  }
}