Google Map API в React: как назначить InfoWindow для каждого маркера

Question

Я начал свой проект с create-react-appи установлен google-maps-react,
Теперь я хочу назначить InfoWindow для каждого маркера, чтобы я мог показать их сразу много. (возможно, ответ очевиден, но не для меня...)
Мой код:

export class MapContainer extends Component {
  render() {
    return (
      <Map
        className={'map'}
        google={this.props.google}
        zoom={13}
        initialCenter={{lat: 54.753986, lng: 24.670219}}
        style={nullStyle}
      >
        {this.props.places.map(place => (
          <Marker
            key={`marker-${place.name}`}
            title={place.title}
            name={place.name}
            position={place.position}
          />
        ))}
        {this.props.places.map(place => (
          <InfoWindow
            key={`infowindow-${place.name}`}
            marker={_JUST_BEFORE_CREATED_MARKER_}
            visible={true}>
            <div>{place.title}</div>
          </InfoWindow>
        ))}
      </Map>
    )
  }
}

Answer 1

Чтобы связать информационное окно с маркером, визуализируйте его внутри <Marker>В приведенном ниже примере показано, как создать информационное окно для каждого маркера:

<GoogleMap
    defaultZoom={5}
    defaultCenter={new google.maps.LatLng(-25.0317893, 115.219989)}>

    {props.places.map(place => (
        <Marker
            key={`marker-${place.name}`}
            title={place.title}
            name={place.name}
            position={place.position}

        >
            <InfoWindow
                key={`infowindow-${place.name}`}
                visible={true}>
                <div>{place.title}</div>
            </InfoWindow>
        </Marker>
    ))}

</GoogleMap>

демонстрация