Al mostrar varios marcadores en un mapa, ¿cómo abrir una sola ventana de información, al hacer clic en un marcador?
Estoy usandoreaccionar-google-mapas para mostrar un mapa con marcadores, y cuando hace clic en un marcador, se abren todas las ventanas de información. Me gustaría mostrar solo la ventana de información de un marcador cuando hago clic en ella, y que los demás permanezcan cerrados.
Aquí está mi código:
<GoogleMap
defaultZoom={15}
defaultCenter={{ lat: 51.508530, lng: -0.076132 }}
>
{props.places && props.places.map((place, i) =>
<Marker onClick={props.onToggleOpen} key={i} position={{ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }} >
{props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
<div>{place.name}</div>
</InfoWindow>}
</Marker>
)}
</GoogleMap>
Y estoy abriendo y cerrando la ventana de información con esto
import { compose, withProps, withStateHandlers, withHandlers, withState } from "recompose";
...
withStateHandlers(() => ({
isOpen: false,
}), {
onToggleOpen: ({ isOpen, id }) => () => ({
isOpen: !isOpen,
})
}),
Estoy mapeando todos los marcadores y mostrándolos en el mapa. ¿Cómo podría hacer clic en abrir solo un marcador InfoWindow?Aquí hay una pregunta relacionada, pero no está hecho con React, y no usa react-google-maps.