Google-maps-react: Markers do not clear out when you render with a new set of markers

[joserocha3]

After the initial set of markers if I render with a new set of markers, every subsequent set gets stuck on the map. Example: original marker is Texas, I render with only California and Texas goes away, so only one marker is left. Now I render with only Arkansas, at this point California is visible along with Arkansas.

The re-render that occurs when using the info window does not cause this issue.

I am able to replicate this on the demo as well in the Autocomplete section. But that might be the intended functionality in the demo.

[auser]

I'm not sure I understand the question... perhaps can you post a jsbin/jsfiddle with the issue?

[joserocha3]

I render a first array of markers. When I change that array and render the markers are updated. When I change the markers a second time that second array stays rendered with the new ones.

Adding a unique key prop to the markers each time seems to fix the issue. The markers are all correctly updated each time.

I will try tomorrow to post to jsbin.

[auser]

Any updates on this @joserocha3 ?

[joserocha3]

I ended up using a different library. You can close this. Thanks for your help.

[coreyar]

@joserocha3 I am having the same issue. Did you find what was causing the problem? What library did you end up using?

[joserocha3]

@CoreyAR we didn't find the cause of the issue.

Came back to this library and ended up supplying a unique key for each marker whether the location was the same as a previous marker or not. That clears the previous set of markers just fine.

Used a timestamp with the object's array index concatenated to get a unique key.

[coreyar]

@joserocha3 You are a lifesaver. That worked so well.

[G-P-Git]

I think part of the problem, at least for markers that haven't changed position, is the check for this.props.position !== prevProps.position in Marker componentDidUpdate. I think it needs to do a deep comparison:

this.props.position.lat !== prevProps.position.lat || this.props.position.lng !== prevProps.position.lng