現在、react-google-maps を使用して Google マップ API を構築しています。複数のマーカーを作成して、情報ウィンドウに世界中の都市の情報を表示したいと考えています。しかし、それらはすべて html オブジェクトからのものです。1 つのマーカーをクリックするたびに、すべての情報ウィンドウが開きます。これを修正する方法があれば?サンプルコード:
<GoogleMap
defaultZoom={3}
defaultCenter={{ lat: 40.452906, lng: 190.818206 }}
>
<Marker id = "mark1"
options={{icon: Mark1}}
position={{ lat: 34.4076645, lng: 108.742099 }}
onClick={props.onToggleOpen}
>
{props.isOpen && <InfoWindow id = "info1"
onCloseClick={props.onToggleOpen}
>
<div> content1 </div>
</InfoWindow>}
</Marker>
<Marker
options={{icon: Mark2}}
position={{ lat: 35.6958783, lng: 139.6869534 }}
onClick={props.onToggleOpen}
>
{props.isOpen && <InfoWindow
onCloseClick={props.onToggleOpen}
>
<div> content2 </div>
</InfoWindow>}
</Marker>
</GoogleMap>