[Bug]Cannot remove a WebglOverlay

[AdamZajler]

Description

When I'm changing places list that is passed down to the Map as a array for map of MapMarker i'm getting error

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

Code that I'm using is the same as it was in: #325 (comment). Im just changing places, so it is triggering re-render of Map.

I'm also doing some calculations to center the map when places are changed or map is loaded:

const handleSetBounds = (): void => {
  if (!map) return;

  map.fitBounds(getMapBounds(window.google.maps, places));

  if (places.length < 2 && places.length > 0) {
    map.fitBounds(getMapBounds(window.google.maps, places));
    map.setZoom(14);
  } else if (places.length === 0) {
    map.setZoom(0);
    map.fitBounds(polandBounds);
  }
};

useEffect(() => {
  if (!map) return;
  handleSetBounds();

  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [map, places]);

Steps to Reproduce

Change variable that is used to map thought map markers

Environment

• Library version: "@vis.gl/react-google-maps": "^0.10.0",
• Google maps version: weekly
• Browser and Version: 124.0.6367.118
• OS: Linux

Logs

Cannot remove a WebglOverlay that has not been set to a map 
    at eval (webpack-internal:///./node_modules/@vis.gl/react-google-maps/dist/index.modern.mjs:1081:5)
    at GoogleMapsMarker (webpack-internal:///./ui/google-maps/GoogleMapsMarker.tsx:23:11)
    at div
    at Map (webpack-internal:///./node_modules/@vis.gl/react-google-maps/dist/index.modern.mjs:783:5)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
    at Box (webpack-internal:///./node_modules/@mui/system/esm/createBox.js:37:72)
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
overrideMethod @ console.js:273
a @ js?key=XXX&solution_channel=GMP_VISGL_react&loading=async&callback=__googleMapsCallback__:348
_.kn.map_changed @ js?key=XXX&solution_channel=GMP_VISGL_react&loading=async&callback=__googleMapsCallback__:348
Uk @ js?key=XXX&solution_channel=GMP_VISGL_react&loading=async&callback=__googleMapsCallback__:155
_.Sk.set @ js?key=XXX&solution_channel=GMP_VISGL_react&loading=async&callback=__googleMapsCallback__:274
(anonymous) @ js?key=XXX&solution_channel=GMP_VISGL_react&loading=async&callback=__googleMapsCallback__:163
dispose @ marker.js:103
KMa @ marker.js:60
dispose @ marker.js:129
setMap @ marker.js:122
set map @ marker.js:121
eval @ index.modern.mjs:1012
safelyCallDestroy @ react-dom.development.js:22932
commitHookEffectListUnmount @ react-dom.development.js:23100
commitPassiveUnmountInsideDeletedTreeOnFiber @ react-dom.development.js:25098
commitPassiveUnmountEffectsInsideOfDeletedTree_begin @ react-dom.development.js:25048
commitPassiveUnmountEffects_begin @ react-dom.development.js:24956
commitPassiveUnmountEffects @ react-dom.development.js:24941
flushPassiveEffectsImpl @ react-dom.development.js:27038
flushPassiveEffects @ react-dom.development.js:26984
commitRootImpl @ react-dom.development.js:26935
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
eval @ react-dom.development.js:25651
Show 1 more frame
Show less

[xcong4328]

Issue same with following:

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

[usefulthink]

Closing this since it's a duplicate of #419.

We are aware this is happening occasionally, and it's clearly related to unmounting an AdvancedMarker component. It's also clear that it's "just" a warning message (annoying, true, but I haven't yet seen any consequence besides that warning in the console).

I already spent considerable time trying to figure out why exactly this is happening so we know how to prevent it.
Without a clear example that reliably reproduces this, it's quite difficult.

[usefulthink]

See also: https://issuetracker.google.com/issues/356878392