react-google-maps: trying to create a toggleable infowindow for each marker - react-google-maps

Question

I know similar questions have been asked on SO before, but I've tried implementing the solutions in the answers and nothing seems to be working.
So, here's the problem I'm having: I'm using react-google-maps to generate a map. The map has multiple markers. Every time I click on a specific marker, I want an infowindow to pop up. The thing is, right now, everythime I click on a marker, the infowindows for all the markers pop up, as shown below:
Would you care to glance over my code and tell me what the problem is:
render() {
const MapWithAMarker = compose(
withStateHandlers(() => ({
isOpen: false,
}), {
onToggleOpen: ({ isOpen }) => () => ({
isOpen: !isOpen,
})
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
defaultZoom={7}
defaultCenter={{ lat: 37.468319, lng: -122.143936 }}
containerElement={<div style={{ height: `300px`, width: `400px`, position: `absolute` }} />}
mapElement={<div style={{ height: `300px` }} /> }
containerElement={
<div style={{height: 300, width: 600}}></div>
}
loadingElement={<div style={{ height: `100%` }} />}
googleMapURL={"https://maps.googleapis.com/maps/api/js?key=AIzaSyCk55BnGfoigxDUwDaiYiyn9tFThcJVsPA"}
>
{store.results.data.map( (result, index) => {
if(result.status.color=='success'){
return <Marker
key={ index }
position={{ lat: result.contract_location.lat, lng: result.contract_location.lng }}
icon={ '/img/darkgreen_MarkerA.png' }
onClick={() => props.onToggleOpen(index)}
>
{props.isOpen && <InfoWindow onCloseClick={() => props.onToggleOpen(index)}>
<div>hi</div>
</InfoWindow>}
</Marker>
}
if(result.status.color=='warning'){
return <Marker
key={ index }
position={{ lat: result.contract_location.lat, lng: result.contract_location.lng }}
icon={ '/img/yellow_MarkerA.png' }
onClick={() => props.onToggleOpen(index)}
>
{props.isOpen && <InfoWindow onCloseClick={() => props.onToggleOpen(index)}>
<div>hi</div>
</InfoWindow>}
</Marker>
}
if(result.status.color=='danger'){
return <Marker
key={ index }
position={{ lat: result.contract_location.lat, lng: result.contract_location.lng }}
icon={ '/img/red_MarkerA.png' }
onClick={() => props.onToggleOpen(index)}
>
{props.isOpen && <InfoWindow onCloseClick={() => props.onToggleOpen(index)}>
<div>hi</div>
</InfoWindow>}
</Marker>
}
}
)}
</GoogleMap>
);

Answer 1

You have mapped your InfoWindows out and conditionally render them with props.isOpen.
The onClick event for InfoWindow accepts an index argument.
However... in your onClick function, any click event will toggle isOpen to true (regardless of the index)
Since all InfoWindows depend only on the boolean isOpen, clicking one will set isOpen to true, and all of them open :)
A way around this is to store the index of the clicked marker. eg: clickedMarkerIndex = x.
Then, check {props.clickedMarkerIndex === index } and render the InfoWindow only if its' index matches the index of the clicked marker.