[google-maps]: Error on destroying marker-clusterer

[piernik]

Reproduction

I tried to reproduce but there seems to be issue with loading google maps:
https://stackblitz.com/edit/components-issue-google-maps?file=src/app/example-component.ts

Expected Behavior

On exiting from current page there should be no error

Actual Behavior

Navigating away from page with marker clusterer throws error:
Error: Uncaught (in promise): TypeError: b.g.remove is not a function

Environment

• Angular: 12
• CDK/Material/Google Maps: 12.0.5
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[crisbeto]

I spent some time trying to reproduce it, but I wasn't able to. Is the markup that you put in the Stackblitz the same as the one you're getting the error for? If not, can you post what your actual markup looks like?

[piernik]

Oh, I didn't notice that I have to manually include marker-clusterer scripts. I thought it is lazy loaded.
And I do think it should be lazy loaded:)

[crisbeto]

Yes, the readme mentions that the script needs to be included separately, although we could be better at throwing an error if it's missing. Did including the script fix your issue?

[piernik]

Yes it did. But I think that it should be lazy loaded some how. I don't want to include it as plain script tag, but I think I have to :/

[crisbeto]

We have some docs about lazy loading the API https://github.com/angular/components/blob/master/src/google-maps/README.md. I'll close this issue since the clusterer works as expected.

[collindutter]

I'm also getting this error when navigating away from the page. I've tried loading markerclusterer from https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js and via npm.

The marker-clusterer works perfectly fine, but errors out when navigating away.

This is my markup:

<google-map height="100%" width="100%" [options]="options">
    <map-marker-clusterer [imagePath]="'assets/markers/m'" [maxZoom]="15">
        <map-marker
            *ngFor="let object of objects; index as i"
            [position]="{
                lat: object.lat,
                lng: object.lng
            }"
            [options]="{
                fontWeight: 'bold',
                draggable: false
            }"
            (mapClick)="openInfoWindow(marker, i)"
            #marker="mapMarker"
        >
            <map-info-window>
                <a routerLink="/detail/{{ object.id }}">{{ object.name }}</a>
            </map-info-window>
        </map-marker>
    </map-marker-clusterer>
</google-map>

UPDATE: I'm in the process of migrating from agm to this repo, and I had both installed. Removing all traces of agm seemed to fix the issue so I suspect it was an issue with libraries being loaded twice.