リアクト - グーグル、地図、複数の情報ウインドウを開い

Question

私は現在反応するとGoogleマップを使用して、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> 

Answer 1

、MarkerのonClickあなたはちょうど私がトグルにフラグを願ってい{props.onToggleOpen}を呼び出します。ここであなたはあなたが上記の行で

onClick={() => { props.onToggleOpen("mark1"); }} 

以下のようなものにあなたのonClickを変更する必要がクリックされているマーカれ送るべき、Mark1はあなたがそれぞれのMarkerを識別するために使用できる一意の値でなければなりません。これをマーカーidまたはそれぞれのMarkerに固有のものに置き換えることができます。

第2に、を変更して、受け取った引数（onClickから送信した一意の値）によって識別されるそれぞれののフラグを切り替える必要があります。データ構造のような配列を使用して、この値を格納することができます。

次に、あなたはMarkerにそれぞれのフラグに基づいて、あなたのInfoWindowを表示する必要があります。 isOpen（上記の変更を取り入れた後）のフラグの配列になります考慮すると、1は正しい方向にあなたを導き希望

<Marker id = "mark1" 
    options={{icon: Mark1}} 
    position={{ lat: 34.4076645, lng: 108.742099 }} 
    onClick={() => { props.onToggleOpen("mark1"); }} 
> 
    {props.isOpen["mark1"] && <InfoWindow id = "info1" 
       onCloseClick={() => { props.onToggleOpen("mark1"); }} 
       > 
       <div> content1 </div> 
    </InfoWindow>} 
</Marker> 

以下のような条件のものを使用して InfoWindowを示すだろう。