[Bug] Cannot remove a WebglOverlay that has not been set to a map

[ykAustin]

Description

Got the warning "Cannot remove a WebglOverlay that has not been set to a map " when using AdvancedMarker

Steps to Reproduce

Render the markers on the map by AdvancedMarker, got the warning (please see the below) from Chrome when leaving the page of the MAP

"Cannot remove a WebglOverlay that has not been set to a map"

Environment

• Library version: 1.0.2
• Google maps version: weekly
• Browser and Version: Chrome
• OS: MAC OS

Logs

Cannot remove a WebglOverlay that has not been set to a map
overrideMethod @ console.js:273
a @ js?key=XXXXXX&solution_channel=GMP_visgl_rgmlibrary_v1_default&loading=async&callback=__googleMapsCallback__:376
_.sn.map_changed @ js?key=XXXXXX&solution_channel=GMP_visgl_rgmlibrary_v1_default&loading=async&callback=__googleMapsCallback__:376
Uk @ js?key=XXXXXX&solution_channel=GMP_visgl_rgmlibrary_v1_default&loading=async&callback=__googleMapsCallback__:161
_.Sk.set @ js?key=XXXXXX&solution_channel=GMP_visgl_rgmlibrary_v1_default&loading=async&callback=__googleMapsCallback__:284
(anonymous) @ js?key=XXXXXX&solution_channel=GMP_visgl_rgmlibrary_v1_default&loading=async&callback=__googleMapsCallback__:169
dispose @ marker.js:103
aPa @ marker.js:60
dispose @ marker.js:129
setMap @ marker.js:122
set map @ marker.js:121
(anonymous) @ index-C8vDtd08.js:417
Xm @ index-C8vDtd08.js:40
Fs @ index-C8vDtd08.js:40
Xo @ index-C8vDtd08.js:40
YR @ index-C8vDtd08.js:40
bi @ index-C8vDtd08.js:40
q1 @ index-C8vDtd08.js:40
ci @ index-C8vDtd08.js:38
(anonymous) @ index-C8vDtd08.js:40

[usefulthink]

Hidden: off topic

[!CAUTION]
A quick heads up first, your API Key was visible as part of the log-messages. I edited it out, but edits are still visible for anyone looking for it (EDIT: I deleted the old version of your comment, still some harvesting bot might have seen it) . Unless the key is properly secured (limited APIs and allowed domains), you should consider deleting it and create a new one.

I have seen those messages pop up as well, and have no Idea how they are caused. I'm suspecting this could happen if markers/advanced-markers are added and removed in very quick succession, which could have been caused by React re-rendering or re-mounting the marker component.

It doesn't seem to impact the application (to me it looks like an error that the maps API should be handling internally) so I'm going to treat this with a lower priority. I'll keep this open and update once I found out what exactly is causing those errors.

[fundevstuff]

Hi @usefulthink ,
I am new here and really like this great project!

I also run into this problem with advanced markers, but also in other places. For instance when I try out this example:
https://github.com/visgl/react-google-maps/tree/main/examples/deckgl-overlay
and just add a dummy conditional rendering to app.tsx (no other changes) and click to trigger rerendering:

const [isSelected, setSelected] = useState(false);


return (
    <>
      <div onClick={() => setSelected(!isSelected)}>Click me to change</div>
      {isSelected &&
        <div>is selected</div>
      }
      {!isSelected &&
        <APIProvider apiKey={API_KEY}>
          <Map
            defaultCenter={{lat: 37.74, lng: -122.4}}
            defaultZoom={11}
            mapId={'xxxyyyzzz'}
            gestureHandling={'greedy'}
            disableDefaultUI={true}>
            <DeckGlOverlay layers={getDeckGlLayers(data)} />
          </Map>
          <ControlPanel />
        </APIProvider>
      }
    </>
  );

It seems to me to happen in a map_changed (callback) function where a getMap() call returns empty rather than the map, see minified code below:

_.wn.prototype.map_changed = function() {
        const a = async()=>{
            let b = this.getMap();
            if (b)
                if (Fs.Dl(this, b),
                _.Gs.has(this))
                    _.Gs.delete(this);
                else {
                    const c = b.__gm.Eg;
                    await c.Mg;
                    await c.Kg;
                    const d = _.rn(c, "WEBGL_OVERLAY_VIEW");
                    if (!d.isAvailable && this.getMap() === b) {
                        for (const e of d.Eg)
                            c.log(e);
                        Fs.tl(this)
                    }
                }
            else
                console.warn("Cannot remove a WebglOverlay that has not been set to a map"),
                Fs.tl(this)
        }
        ;
        Fs ? a() : _.uk("webgl").then(b=>{
            Fs = b;
            a()
        }
        )
    }

Given the above, my guess is that it is related to using a WebglOverlay with the map in general (new GoogleMapsOverlay({interleaved: true})).
Please up the priority on this if possible and please let me know if I can help with more data :)
Thanks alot!

[usefulthink]

The thing is, this has no immediate relation to anything we are doing with the maps API. That WebglOverlay mentioned in the error-message isn't something we create or interact with.

It could be something used internally by the AdvancedMarker implementation, maybe related to the collision-handling or something like that. I am in contact with folks at the google maps team about this.

What would help the most in that context, would be a vanilla JS example that triggers this error, but I haven't yet had the time to investigate this further. It might be as simple as running marker.map = null on a marker that hasn't first been added to the map (at least that is something I could see out library doing).

[usefulthink]

As far as I am aware, this also doesn't affect applications built with this library (besides an annoying error-message in the console), am I wrong on that?

[YJ-webdev]

same issue on my project too. it does not affect on any other functions though, I hope the issue to be solved anytime soon.

[arithtic]

my team and I are experiencing the same issue. there are destruction techniques not being properly handled by vis.gl, or at least being passed up for us as devs to handle

[usefulthink]

@arithtic the problem here is that nobody seems to know what those techniques are, and where they are not being handled, can you elaborate?

[arithtic]

https://developers.google.com/maps/documentation/javascript/webgl/webgl-overlay-view

@usefulthink That link above talks about how to correctly use and remove a webgl overlay. The warning/error shows that it is specifically related to this and must be because AdvancedMarker from vis.gl is using that google maps import incorrectly when destructing.

[arithtic]

Don't think this is something we can fix without directly using google.maps.WebGLOverlayView and the other raw JS library. vis,gl will need to address this I'm pretty sure

[usefulthink]

The thing is, we're only using the google.maps.marker.AdvancedMarkerElement, and there's nothing in this library that has anything to do with the google.maps.WebGLOverlayView. The error ocurs internally in the maps API (notably, it occurs in the marker.js file, not in webgl.js), and there's no explanation I've found so far what this WebglOverlay from the error-message is (I'm pretty sure that it's an error message that wasn't intended to be seen by Maps API users at all).

I'm looking to reproduce this error-message without our library, which should tell us how this could be fixed in the library.

[paiameya]

The thing is, we're only using the google.maps.marker.AdvancedMarkerElement, and there's nothing in this library that has anything to do with the google.maps.WebGLOverlayView. The error ocurs internally in the maps API (notably, it occurs in the marker.js file, not in webgl.js), and there's no explanation I've found so far what this WebglOverlay from the error-message is (I'm pretty sure that it's an error message that wasn't intended to be seen by Maps API users at all).

I'm looking to reproduce this error-message without our library, which should tell us how this could be fixed in the library.

@usefulthink The error is being caught at line 357 of maps-api-v3/api/js/57/9/intl/en_gb/main.js

[usefulthink]

Turns out, the error-message can be easily reproduced with the vanilla API. I created an Issue in the maps issue tracker about this: https://issuetracker.google.com/issues/356878392 (please +1 the issue there to raise awareness)

Also, while you're here, could you please have a quick look at this codesandbox and confirm that the warning-message is logged for you as well:
https://codesandbox.io/p/sandbox/repro-adv-marker-remove-warning-nccv7y?file=%2Fsrc%2Findex.ts%3A29%2C66

(if you don't see the message in the console, please add a comment here with your browser / os / related error-messages)

[Miderson99]

I have this same problem too in my aplication.

`const removerAllMarkers = () => {
listMarker.forEach((marker) => {
if (marker.setMap) {
marker.setMap(null);
}
});
listMarker = [];

if (markerClusterer) {
markerClusterer.clearMarkers();
markerClusterer = null;
}
};
`
Every thime that I call the function to clean the map, even that I make the verfication wether the setMap have something, this is not enough to resolve the problem.

[usefulthink]

See #419 (comment) – it's an issue in the Maps API and there's nothing we can do about it on our end.

Please upvote the issue in the google issue tracker if you are affected by this: https://issuetracker.google.com/issues/356878392

[usefulthink]

I just received a notification from the issue tracking system that this has been solved in the latest maps API version: https://issuetracker.google.com/issues/356878392