JustFly1984 / react-google-maps-api

React Google Maps API
MIT License
1.75k stars 426 forks source link

GoogleMap only adds elements, do not remove/change them #3229

Open davidjgonzalez opened 1 year ago

davidjgonzalez commented 1 year ago

Issue template

You can donate or became a sponsor https://opencollective.com/react-google-maps-api#category-CONTRIBUTE

If you want to ask question, please ask it in Github Discussions, Spectrum.chat or Slack channel

Please do not post unformatted code into issues, and please do not ask questions. Only real issues, PR's or feature requests are allowed. Minimal reproduction in codesandbox.io is required.

Please provide an explanation of the issue

Your Environment

os: mac

node --version: 16.8.1

react version: 18.2.0 : webpack version

@babel version

@react-google-maps/api version: 2.18.1

How does it behave?

I can add elements to a GoogleMap (Markers or Directions) but when i try to remove a marker/direction origin/waypoint/destination, ir change the order, all the map artifacts (markers, route polylines ) all continue to show up on on the Google map. It's like I can add elements to the Map, but I cannot remove elements that have been previously drawn. Oddly, i can add elements to the map, and they seem to always work - its changing things already drawn to the map that seems to be the problem. Refreshing the webpage (forcing a "cold reload") of the map, everything renders as expected.

It seems to be same issue reported at: https://stackoverflow.com/questions/74918204/cannot-clear-route-from-directionrenderer-reactjs-with-react-google-maps-api

How should it behave correctly?

Changing my markers or directions state should result in the GoogleMap's visuals reflecting the react state.

Basic implementation of incorrect behavior in codesandbox.com

MarcusOhman91 commented 1 year ago

Having the same issues. In my case I am moving the offset of icons on a polyline but the icons are not moved, instead new ones are created on the new offset, with the old ones still there (but now appearing below the polyline) image

For me this only appears locally when using react strict mode (causing the components to always render twice). With this in mind I am guessing that this is some DOM cleanup issue. When the map component is unmounted the DOM is not properly cleaned so we get some kind of map duplicate

It also only happens the first time i move the offset. If i move the offset again the second icon will be moved properly (but the first icon will still remain)

davidjgonzalez commented 1 year ago

@MarcusOhman91 Checkout the solution here: https://stackoverflow.com/questions/76149553/next-js-react-18-google-maps-js-api-not-clearing-prior-map-state/76150188#76150188

This is how i ended up fixing/working around this.