feat(ANGULAR GOOGLE MAPS): Is it possible to use the new package @googlemaps/markerclusterer?

[francesco-clementi-92]

Feature Description

I'd like to use the package https://www.npmjs.com/package/@googlemaps/markerclusterer instead of the old one https://www.npmjs.com/package/@googlemaps/markerclustererplus.

Use Case

It will be possible to use different algorithms, improve performance and more.

[A2Ple98]

I just asked for that yesterday, they can't change the @types/googlemaps to @types/google.maps for that to work, it's one of the future changes in v13 though. You can use skipLibCheck in your tsconfig file to skip the type check

[jelbourn]

I believe #23350 should resolve this. Since the type change constitutes a breaking change, this will be in the next major version (v13).

[crisbeto]

@jelbourn this won't be fixed by #23350 because it only updates the main Google Maps typings, not the clusterer ones which are in a separate package. Reopening.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[ghost]

Does this issue still not consider for new updates? Is it possible to vote again?

[royvanderwesten]

We really need to reconsider this issue. It took me too long to realize that I have to use the new Markerclusterer package, but add the script tag of the old markerclustererplus package to the head. Otherwise I get the markerclusterer class not found error. I'm not even sure it's a feature, seems more like a bug to me.

[zellkon]

I have same issue, Can we fix this issue ?

[itayperry]

Will this make the <map-marker-clusterer> component work?

[andreyjkee]

Any work in progress for this issue?

[volo4dev]

It works ? I am facing the problem in Angular v14

[PhSlowSense]

I have the same problem, using the map-marker-clusterer component throw the error "class not found" that recommend to install the deprecated MarkerClustererPlus library...

[rbalet]

@PhSlowSense and @volo4dev

For me, the only version that is working is the following.

"dependencies": {
    "@googlemaps/markerclusterer": "^2.1.4",
},
"devDependencies": {
    "@types/google.maps": "^3.53.2",
}

[PhSlowSense]

Thanks @rbalet I will try ! Even with your version it is not working :(

It work with @googlemaps/markerclusterer when creating clusters with the class MarkerClusterer itself but it won't work with the selector map-marker-clusterer

[runette]

For information - in my app I created a component based on the code in the draft PR https://github.com/angular/components/pull/24853 updated for the latest version of the component and for Dynamic API loading.

This seems to work well for me - but I make no guarantees.

I have added an Input to tell the clusterer when the API is loaded - which I linked to the google map "loaded" output event. I am very sure that there are better ways of doing this but I don't have the time to find out.

If I find the time - I might create a new PR based on this and someone can improve that.

The component is in this gist:

https://gist.github.com/runette/3cc43124bad49df69e28ae177cfdc8b9

the calling html is :

<google-map height="100%"
            width="100%"
            [options]="options"
            (mapInitialized)="loaded($event)"
>
    <new-map-marker-clusterer
        [options]="clusterOptions"
        [apiInitialized]="apiLoaded"
    >
        @for (marker of markerPositions; track marker) {
            <map-marker 
                [position]="marker.position" 
                [icon]="marker.icon" 
                [clickable]="true"
                (mapClick)="markerClick($event)"
            />
        }
    </new-map-marker-clusterer>
</google-map>

and

  loaded($event) {
    this.apiLoaded.next();
}