While working on Project #7 in the openclassrooms Front-end developer path I hit a bug that I had a really hard time solving and my mentor, Mike Preble, made me promise to share the experience – so here we go.
The Project requires that Google Maps is used in combination with React. In order to get a hang of both, I started out by following the very detailed article by Ari Lerner at fullstackreact.com named How to Write a Google Maps React Component.
The bug I experienced caused markers to stay on the map, even though they had been removed.
It was caused by a statement typo in the Marker Component that checks whether the position of the marker has changed. This is done in the React componentDidUpdate lifecycle hook and caused the marker to render each time the map was moved – drawing multiple markers on top of each other.
So when removing the marker from the map, only last rendered marker was removed – making it seem like nothing happened.
So if you experience that markers stay on the map after removing them, then start by checking that you are not rendering the same marker multiple times.