8

I'm using the react-google-maps library and I've been doing pretty well so far. My app receives a json with locations from my backend and I'm mapping them to add Markers on the map, they are displaying just fine. These markers have an OnClick function which sets information on a ReactHook.

When my hook state changes, my InfoWindow triggers and displays itself and this is fine. The problem is a little InfoWindow with no information which triggers at the same time than the other, i have tried to find the error for a few hours now and I can't find it, I've checked the code and also I'be inspect the components from the Browser but that little InfoWindow is not being recognized by the react developer tools.

Here is my code:

function Map(props){
    const [selectedTienda, setSelectedTienda] = useState(null)
    const options ={
        styles: MapStyles,
        disableDefaultUI: true,
  
    }
    return(
        <GoogleMap
        defaultZoom={17} 
        defaultCenter={{lat: 29.0824139, lng: -110.966389}}
        options={options}

        >
            {props.items.map(tienda =>(
        <Marker
        key={tienda['tienda.id']}
        position={{
            lat: parseFloat(tienda['tienda.ubicacion.lat']),
            lng: parseFloat(tienda['tienda.ubicacion.lng'])
        }}
        onClick={()=>{
            setSelectedTienda(tienda);
        }}
        />
        ))}
         {selectedTienda ? (
            <InfoWindow position={{
                lat: parseFloat(selectedTienda['tienda.ubicacion.lat']),
                lng: parseFloat(selectedTienda['tienda.ubicacion.lng'])
            }}
            onCloseClick={()=>{setSelectedTienda(null)}}
            >
            <div><h4>This is the <br/>INFOWINDOW I WANT</h4></div>
            </InfoWindow>
        ): null}
               
               
        </GoogleMap>
    )
}
const MyMapComponent = withScriptjs(withGoogleMap(Map))

Here is also an image of my nightmare:

enter image description here

Here is what my react dev tools is showing, which is only the main InfoWindow

enter image description here

Manuel Duarte
  • 644
  • 4
  • 18

3 Answers3

9

I found a solution that works without removing the React.StricMode wrapper:

Just use InfoWindowF instead of InfoWindow (that applies to the html tags as well).

AirLancer
  • 1,258
  • 12
  • 19
8

So the thing that was giving me a headache was the React Strict Mode wrapper on the index.js, which renders my component twice. According to the React documentation,

StrictMode is a tool that helps highlight potential problems in application. Like Fragment, StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

StrictMode currently helps with:

  • Identifying components with unsafe lifecycles
  • Warning about legacy string ref API usage
  • Warning about deprecated findDOMNode usage
  • Detecting unexpected side effects
  • Detecting legacy context API

So in my case, the problem was that StrictMode was detecting unexpected side effects on my map component, which was intentionally double-invoking my useState function, making two InfoWindows appear, instead of just one.

My solution was to remove the React.StrictMode wrapper from my index.js file, and that was it, but I think there might be another solution to avoid those unexpected side effects.

More information on StrictMode and how it works: https://reactjs.org/docs/strict-mode.html

Manuel Duarte
  • 644
  • 4
  • 18
2

AirLancer's solution to use InfoWindowF worked for me too. Using MarkerF instead of Marker also helped solve some other bugs (not rendering immediately). According to another forum these are issues in React 18+

Yoni Lazarus
  • 21
  • 1