React-google-map dialog

Question

I am currently creating a google goi map using interactive google maps, and I would like to create several markers to display information about cities around the world in the info window. But since they are all from an html object. Whenever I click on one marker, all info windows will be open. If there is a way to fix this? Code example:

<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

Your code onClickof Markeryou simply call {props.onToggleOpen}, which I hope to change the flag. Here you should send the marker that you click, so you need to change your onClickto something like below

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

Mark1 , Marker. , Marker.

-, onToggleOpen, Marker, ( , `onClick). , , .

InfoWindow , Marker. , isOpen ( ), InfoWindow -

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

, .