title: google-maps-react open InfoWindow by clicking on list item or marker
body: <p>i'm using the google maps react component to show a simple map with markers...and a menu to filter the results...when I click a marker i'm able to show the info window...but when I click on the menu list I can't seem to figure out how to open the corresponding marker's InfoWindow? How do I get a reference to a specific marker?</p>
  
  <p>Here's my APP</p>
  
  <pre><code>state = {
  currentPlace: '',
  currentMarker: {},
  markerShowing: false,
  };
  
  onMarkerClick = (props, marker) =&gt; {
  this.setState({
    currentPlace: props,
    currentMarker: marker,
    markerShowing: true,
  });
  }
  
  render() {
  
  const { currentMarker, currentPlace, clubs, markerShowing } = this.state;
  
  return (
    &lt;div&gt;
      &lt;main&gt;
        &lt;Menu
          clubs={clubs}
        /&gt;
  
        &lt;GoogleMap
          clubs={clubs}
          markerInfo={this.onMarkerClick}
          currentMarker={currentMarker}
          currentPlace={currentPlace}
          markerShowing={markerShowing}
          /&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  );
  }
  }
  </code></pre>
  
  <p>Here's the GoogleMap Component </p>
  
  <pre><code>const GoogleMap = (props) =&gt; {
  
  const { google, clubs, currentMarker, currentPlace, 
  markerShowing } = props;
  
  const newClubList = clubs
    .filter(club =&gt; club.name.toLowerCase().indexOf(filterTerm.toLowerCase()) &gt;= 0)
    .map(club =&gt; {
      return (
        &lt;Marker
          key={club.name}
          title={club.title}
          name={club.name}
          position={club.position}
          onClick={props.markerInfo.bind(this)}
        /&gt;
      )
    });
  
  return (
    &lt;Map
      google={google}
      initialCenter={{
        lat: 34.098051,
        lng: -118.327246
      }}
      zoom={15}
      style={{height: '100%', width: '100%'}}
  
      {newClubList}
  
    &lt;/Map&gt;
     );
    }
  </code></pre>
  
  <p>Here's my Menu Component </p>
  
  <p>When I click on the Li...I essentially want to call the onMarkerClick function from my app...passing the props (which I have) and the marker (Which I have no clue how to get!) </p>
  
  <pre><code>  const Menu = (props) =&gt; {
  
    const { clubs } = props;
  
     const newClubList = clubs
    .filter(club =&gt; club.name.toLowerCase().indexOf(filterTerm.toLowerCase()) &gt;= 0)
    .map(club =&gt; {
      return (
        &lt;li key={club.name} className='item' onClick={}&gt;{club.name}&lt;/li&gt;
      )
    });
  
  return (
    &lt;nav id='menu' className={toggleMenu}&gt;
        &lt;ul&gt;
          {newClubList}
        &lt;/ul&gt;
    &lt;/nav&gt;
  );
  }
  </code></pre>
  
  <p>Here's the full repo...<a href="https://github.com/ctaminian/neighborhood_map" rel="nofollow noreferrer">https://github.com/ctaminian/neighborhood_map</a></p>
  
  <p>Thanks in advance</p>