Reactjs 谷歌地图：多个信息窗口打开

这可能是一个愚蠢的简单问题，但请容忍我。 我正在尝试使用信息窗口运行具有多个标记的。代码如下：

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>
);

const-MapWithADirectionsRenderer=compose(
用道具({
谷歌地图网址：https://maps.googleapis.com/maps/api/js?key=AIzaSyDf-yIqxErTkbWzKhLox7nAANnrfDIY190&libraries=几何图形、图形、位置“，
加载元素：，
集装箱运输：，
mapElement:，
}),
withStateHandlers（（）=>({
伊索彭：错，
}), {
onToggleOpen:（{isOpen}）=>（）=>({
伊索本：！伊索本，
})
}),
用ScriptJS，
用谷歌地图，
})
)（道具=>
{props.isOpen&&
南波士顿
}
{props.isOpen&&
萨默维尔
}
{props.directions&&}
);

---

单击其中一个标记时，所有标记的信息窗口将打开。如何打开我单击的标记的信息窗口？

我建议引入一个组件：

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>)
    }
}

 <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>