title: Google maps Infowindow ReactJS
body: <p>very new to react. I'm using google-maps-react-api. I have two files. Index.js and MapMarker.js. It loads a few location points with info windows already loaded. I can close the window but when clicking on the marker they do not reopen. My onCLick events do not work as I expect. 
  I want the case to be the markers load and I click them to show info window and then can close the window as well. I've read the docs and issues on Github but can't find the info. Thanks.</p>
  
  <pre><code>Index.js
  
  import ReactDOM from "react-dom";
  import React from "react";
  
  import { GoogleMap, LoadScript, MarkerClusterer } from "@react-google-maps/api";
  
  import MapMarker from "./MapMarker";
  
  const mapOptions = {
    fullscreenControl: false,
    streetViewControl: false,
    mapTypeControl: false,
    styles: [
      {
        featureType: "poi",
        elementType: "labels",
        stylers: [
          {
            visibility: "off"
          }
        ]
      },
      {
        featureType: "transit",
        elementType: "all",
        stylers: [
          {
            visibility: "off"
          }
        ]
      }
    ]
  };
  const key = ""; // PUT GMAP API KEY HERE
  const defaultLocation = {
    lat: 37.9755691,
    lng: 23.7361789
  };
  let markers = [
    {
      id: 1,
      lat: 37.975,
      lng: 23.7361789
    },
    {
      id: 2,
      lat: 37.9755,
      lng: 23.7361789
    },
    {
      id: 3,
      lat: 37.976,
      lng: 23.7361789
    }
  ];
  
  class Map extends React.Component {
    state = {
      isInfoOpen: false,
      selectedMarkerId: null,
      noOfClusters: null,
      markers: markers
    };
  
    onClick = (isInfoOpen, selectedMarkerId) =&gt; {
      this.setState({
        isInfoOpen,
        selectedMarkerId
      });
    };
  
    render() {
      const { isInfoOpen, selectedMarkerId } = this.state;
  
      return (
        &lt;LoadScript googleMapsApiKey={key} &gt;
          &lt;div&gt;
            &lt;div
              style={{
                width: "100%",
                height: 500,
                display: "flex"
              }}
            &gt;
              &lt;GoogleMap
                options={mapOptions}
                center={defaultLocation}
                zoom={18}
                onLoad={this.onMapMounted}
                onIdle={this.onMapIdle}
                onBoundsChanged={this.onBoundsChanged}
                onZoomChanged={this.onZoomChanged}
                mapContainerStyle={{ flex: 1 }}
              &gt;
                &lt;MarkerClusterer averageCenter enableRetinaIcons gridSize={60}&gt;
                  {clusterer =&gt;
                    this.state.markers.map(markerData =&gt; (
                      &lt;MapMarker
                        key={markerData.id}
                        clusterer={clusterer}
                        markerData={markerData}
                        isSelected={markerData.id === selectedMarkerId}
                        isInfoOpen={
                          markerData.id === selectedMarkerId &amp;&amp; isInfoOpen
                        }
                        onClick={() =&gt; this.onClick()}
                      /&gt;
                    ))
                  }
                &lt;/MarkerClusterer&gt;
              &lt;/GoogleMap&gt;  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/LoadScript&gt;
      );
    }
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;Map /&gt;, rootElement);
  
  </code></pre>
  
  <pre><code>MapMarker.js
  
  import React from "react";
  
  import { InfoWindow, Marker} from "@react-google-maps/api";
  
  export default class MapMarker extends React.Component {
    state = {
      mapMarker: null,
      activeMarker: {},
      selectedPlace: {},
      showingInfoWindow: false
  };
  
  onMarkerClick = (props, marker) =&gt;
      this.setState({
          activeMarker: marker,
          selectedPlace: props,
          showingInfoWindow: true
      });
  
  onInfoWindowClose = () =&gt;
      this.setState({
          activeMarker: null,
          showingInfoWindow: false
      });
  
    onLoad = mapMarker =&gt; {
      this.setState({
        mapMarker
      });
    };
  
    render() {
      const { clusterer, markerData } = this.props;
      const { mapMarker } = this.state;
  
      return (
        &lt;Marker
          clusterer={clusterer}
          onLoad={this.onLoad}
          position={{ 
            lat: markerData.lat,
            lng: markerData.lng
          }}
          onClick={() =&gt; this.onMarkerClick()}
  
        &gt;
          {mapMarker &amp;&amp; (
          &lt;InfoWindow
              anchor={mapMarker}
              position={{
                lat: markerData.lat,
                lng: markerData.lng
              }}  
              marker={this.state.activeMarker}
              onClose={this.onInfoWindowClose}
              visible={this.state.showingInfoWindow}
            &gt;
              &lt;div style={{ background: "white" }}&gt;
                {"custom Infobox: " + markerData.id}
              &lt;/div&gt;
            &lt;/InfoWindow&gt;
          )}
        &lt;/Marker&gt;
      );
    }
  }
  
  </code></pre>