visgl
[Bug] Cannot remove a WebglOverlay that has not been set to a map
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
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.
@usefulthink Hi, just for your information: there is a feature to delete a specific revision of the edit history in GitHub. Probably, you have the edit permission for this.
ref. Tracking changes in a comment - GitHub Docs - https://docs.github.com/en/communities/moderating-comments-and-conversations/tracking-changes-in-a-comment#deleting-sensitive-information-from-a-comments-history
@usefulthink Hi, just for your information: there is a feature to delete a specific revision of the edit history in GitHub. Probably, you have the edit permission for this.
Awesome, haven't seen that option before. Thanks and done.
Welcome!🙂 I think there was no such feature in the past so it was introduced at some point, a handy one in this case.
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!
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).
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?
same issue on my project too. it does not affect on any other functions though, I hope the issue to be solved anytime soon.
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
@arithtic the problem here is that nobody seems to know what those techniques are, and where they are not being handled, can you elaborate?
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.
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
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.
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 thegoogle.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 thisWebglOverlayfrom 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
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?
The map actually stops displaying and we get this "map crashed" icon on the top left as in the screenshot
@paiameya is that something that I can have a look at? There might be a different issue at play there.
@usefulthink
Open demo.reelreport.net in browser like chrome, brave or any set the top right date filter to 30 days, click on cluster till its last zoom,
Steps to follow: 1. click or hover on a tooltip , 2. click on video inside the tooltip 3. watch the video for 2 to 3 seconds and go back, 4. hover or click on another marker or cluster , view video for 2 to 3 seconds and come back 5. repeat this above steps and then the map will blank.
The issue appears not only in mobile but also it windows and mac
https://github.com/user-attachments/assets/f0b8f144-ccd9-47ca-99f2-d2efd0ddfadd
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)
@paiameya I'm sorry, I can't reproduce the problem you are describing. And even if, it's very unlikely I could tell you anything about it without seeing the code involved. It also doesn't sound like it's related to this issue.
@usefulthink Thank you for trying. We will look into this and if we find more info that the bug is caused because of this issue, we will bring it to your notice. Thank you for your time.
@paiameya watch out for things like unnecessary renders of the map- and marker-components, that can sometimes be really bad. Also, maybe check the two updated clustering examples (here and here) for hints, in the older version were still some problems I had to fix.
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.
See https://github.com/visgl/react-google-maps/issues/419#issuecomment-2263582300 – 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
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