Just a short disclaimer before I move to the actual question. I am working on someone else’s React project and am supposed to improve it any way I can. They have added a Google map and markers to their web app, which I am not very familiar with.
So here goes the question. I have discovered the following bug. When the map is clicked, a pop-up (InfoWindow) is supposed to appear containing a form that the user can fill in. Once submitted, the data is saved on a database and when the same marker is clicked again, the data that was submitted is rendered inside the InfoWindow. No matter how many forms are submitted, the user can add more markers and repeat the same process. However, if a marker's InfoWindow is closed without the form being filled in and submitted, new infoWindows (containing a form) do not display anymore when the map is being clicked.
I have gone through the code multiple times, but cannot understand where the problem lies.
{newMarker && (
<MarkerF
position={{
lat: newMarker.latitude,
lng: newMarker.longitude,
}}
icon={{
url: require('../.././assets/firemarker.png'),
}}
>
{/* Pop-up bug must be here */}
{/* create new marker by clicking on map */}
<InfoWindowF
position={{
lat: newMarker.latitude,
lng: newMarker.longitude,
}}
>
<div>
<Form
handleFormSubmit={handleFormSubmit}
setUserLocation={setUserLocation}
setUserDescription={setUserDescription}
setFirePower={setFirePower}
/>
</div>
</InfoWindowF>
</MarkerF>
)}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>