title: React-google-maps + redux - InfoWindow on marker click
body: <p>I am trying to have same effect on my page as here <a href="https://tomchentw.github.io/react-google-maps/basics/pop-up-window" rel="nofollow noreferrer">react-google-map demo</a>. I used react-google-maps. The thing is I am fetching data with markers' informations and I don't know how can I handle click that will show/hide InfoWindow. Probably the reason is somewhere with state, I don't know how to make variable "isShown" true/false for each marker in markers array. Here is my code:</p>
  
  <pre><code>const GettingStartedGoogleMap = withGoogleMap(props =&gt; (
  
    &lt;GoogleMap
      ref={props.onMapLoad}
      defaultZoom={16}
      defaultCenter={props.defCenter}
      onClick={props.onMapClick}
    &gt;
      {props.markers.map((marker,i) =&gt; (
        &lt;Marker
          key={i}
          position={marker.location}
          time={marker.time}
          onClick={() =&gt; props.onMarkerClick(marker)}
          // HERE I TRIED SOMETHING LIKE marker.isShown=true; but it is NOT WORKING
        &gt;
          {
            &lt;InfoWindow&gt;
               &lt;div className="marker-text"&gt;{marker.time}&lt;/div&gt;
            &lt;/InfoWindow&gt;
          }
        &lt;/Marker&gt;
  
      ))}
    &lt;/GoogleMap&gt;
  ));
  
  class GettingStartedExample extends Component {
  
    componentDidMount(){
      this.props.fetchMarkers();
    }
  
    state = {
       markers: this.props.markers,
     };
  
    handleMapLoad = this.handleMapLoad.bind(this);
    handleMarkerClick = this.handleMarkerClick.bind(this);
  
    handleMapLoad(map) {
      this._mapComponent = map;
      if (map) {
        console.log(map.getZoom());
      }
    }
  
    handleMarkerClick(targetMarker) {
      /*
       * All you modify is data, and the view is driven by data.
       * This is so called data-driven-development. (And yes, it's now in
       * web front end and even with google maps API.)
       */
      const nextMarkers = this.state.markers.filter(marker =&gt; marker !== targetMarker);
      console.log(targetMarker.showInfo)
      this.setState({
        markers: nextMarkers,
      });
    }
  
    render() {
      return (
        &lt;div className='container map-container'&gt;
          &lt;GettingStartedGoogleMap
            containerElement={
              &lt;div style={{ height: `100%` }} /&gt;
            }
            mapElement={
              &lt;div style={{ height: `100%` }} /&gt;
            }
            onMapLoad={this.handleMapLoad}
            markers={this.props.markers}
            onMarkerClick={this.handleMarkerClick}
            defCenter={{lat: 50.07074, lng: 19.915718}}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  GettingStartedExample.propTypes={
    markers: React.PropTypes.array.isRequired,
    fetchMarkers: React.PropTypes.func.isRequired
  }
  
  function mapStateToProps(state){
    return{
      markers:state.markers
    }
  }
  
  export default connect(mapStateToProps,{fetchMarkers})(GettingStartedExample);
  </code></pre>
  
  <p>Currently it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ZhEUR.png" rel="nofollow noreferrer">Markers with InfoWindow</a></p>
  
  <p>On my final effect I would like to have InfoWindow on the newest marker and handle click that allows you to show/hide InfoWindows on all markers.</p>
  
  <p>How can I achieve that showing/hiding InfoWindow on each marker?</p>
  
  <p>Thanks a lot for any help!</p>