Google-maps-react marker not showing InfoWindow onClick

Question

When I click the google maps marker, it registers the click but I cant appear to get the InfoWindow to appear after the state change.

Tried setting/reading from an updated state on click

'''react

import React from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react'; 

export class BathroomMap extends React.Component{

constructor(props){
    super(props);
    this.state = {
        gmapsAPI: "https://maps.googleapis.com/maps/api/js?key="+ this.API_KEY +"&callback=initMap",
        center: {
            lat: 40.7367,
            lng: -73.9899
          },
        zoom: 15,
        showingInfoWindow: false,
        activeMarker: {},
        selectedPlace: {},
        infoWindowOpen: false,
    }

    this.handleToggleOpen = this.handleToggleOpen.bind(this);
}

handleToggleOpen = () => {
    console.log("Marker Clicked");
    this.setState({
       infoWindowOpen: !this.state.infoWindowOpen,
    });
}

render() {
    return (

            <Map google={window.google} zoom={14} initialCenter={this.state.center}>
                <Marker onClick={this.handleToggleOpen}
                    name={'Current location'} />
                <InfoWindow open={this.state.infoWindowOpen} onClose={this.onInfoWindowClose}>
                    <div>
                        <h1>Marker Info Placeholder</h1>
                    </div>
                </InfoWindow>
            </Map>

    );
}
}

BathroomMap = GoogleApiWrapper({
  apiKey: (/*Omitted*/)
})(BathroomMap)

'''

I expected google map marker with some sort of InfowWindow to appear but instead the infowWindowOpened returns undefined

Answer 1

The google-maps-react documentation on InfoWindow says the following:

The visibility of the <InfoWindow /> component is controlled by a visible prop. The visible prop is a boolean (PropTypes.bool) that shows the <InfoWindow /> when true and hides it when false.

There are two ways how to control a position of the <InfoWindow /> component. You can use a position prop or connect the <InfoWindow /> component directly to an existing <Marker /> component by using a marker prop.

In your code implementation, you're missing a visible prop, and either a position prop or a marker prop. This is why your info window is not showing up.

My answer and linked codesandbox in related thread React and google-maps-react. Not displaying InfoWindow will hopefully help you.