Вероятно, это будет глупо простой вопрос с ответом, но, пожалуйста, потерпите меня. Я пытаюсь запустить реагировать на карты Google с несколькими маркерами с информационными окнами. Вот код:
const MapWithADirectionsRenderer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyDf-yIqxErTkbWzKhLox7nAANnrfDIY190&libraries=geometry,drawing,places",
loadingElement: <div style = {{ height: `100%` }} />,
containerElement: <div style = {{ height: `800px` }} />,
mapElement: <div style = {{ height: `100%` }} />,
}),
withStateHandlers(() => ({
isOpen: false,
}), {
onToggleOpen: ({ isOpen }) => () => ({
isOpen: !isOpen,
})
}),
withScriptjs,
withGoogleMap,
})
)(props =>
<GoogleMap
defaultZoom = {13}
defaultCenter = {new google.maps.LatLng(42.357064, -71.062577)}
>
<Marker
position = {{ lat: 42.3381437, lng: -71.0475773 }}
onClick = {props.onToggleOpen}
>
{props.isOpen && <InfoWindow onCloseClick = {props.onToggleOpen}>
<h3>South Boston</h3>
</InfoWindow>}
</Marker>
<Marker
position = {{ lat: 42.3875968, lng: -71.0994968 }}
onClick = {props.onToggleOpen}
>
{props.isOpen && <InfoWindow onCloseClick = {props.onToggleOpen}>
<h3>Somervil</h3>
</InfoWindow>}
</Marker>
{props.directions && <DirectionsRenderer directions = {props.directions} />}
</GoogleMap>
);
Когда я нажимаю один из маркеров, информационные окна для всех маркеров открываются. Как мне просто открыть информационное окно маркера, который я нажимаю?





Предлагаю ввести компонент:
class MarkerWithInfoWindow extends React.Component {
constructor() {
super();
this.state = {
isOpen: false
}
this.onToggleOpen = this.onToggleOpen.bind(this);
}
onToggleOpen() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (<Marker
position = {this.props.position}
onClick = {this.onToggleOpen}>
{this.state.isOpen && <InfoWindow onCloseClick = {this.onToggleOpen}>
<h3>{this.props.content}</h3>
</InfoWindow>}
</Marker>)
}
}
для управления информационным окном для каждого маркера через состояние MarkerWithInfoWindow:
<GoogleMap
defaultZoom = {13}
defaultCenter = {new google.maps.LatLng(42.357064, -71.062577)}>
<MarkerWithInfoWindow position = {{ lat: 42.3381437, lng: -71.0475773 }} content = "South Boston" />
<MarkerWithInfoWindow position = {{ lat: 42.3875968, lng: -71.0994968 }} content = "Somervil" />
</GoogleMap>