react-google-maps
react-google-maps copied to clipboard
[Bug]Cannot remove a WebglOverlay
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: https://github.com/visgl/react-google-maps/discussions/325#discussion-6563222. 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