Cannot read property 'setMap' of undefined

I am getting an error caused by Marker.js, using the google-maps-react downloaded from npm. The code I have is below:

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

class RegionalMap extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			showingInfoWindow: false,
			activeMarker: {},
			selectedPlace: {},
		};
	}

	onMarkerClick = (props, marker, e) => {
		this.setState({
			selectedPlace: props,
			activeMarker: marker,
			showingInfoWindow: true
		});
	};

	onInfoWindowClose = () => {
		this.setState({
			showingInfoWindow: false,
			activeMarker: null
		});
	};

	onMapClicked = (props) => {
		if (this.state.showingInfoWindow) {
			this.setState({
				showingInfoWindow: false,
				activeMarker: null
			});
		}
	};

	render() {
		return (
			<div id="google-map-holder">
				<Map google={this.props.google}
						style={{width: '100%', height: '100%', position: 'inherit'}}
						className={'map'}
						zoom={14}
						onClick={this.onMapClicked}>
					<Marker
						mapCenter="aarr"
						onClick={this.onMarkerClick}
						name={'SOMA'}
						position={{lat: 37.778519, lng: -122.405640}} />
					<Marker
						onClick={this.onMarkerClick}
						name={'Dolores park'}
						position={{lat: 37.759703, lng: -122.428093}} />

					<InfoWindow
						marker={this.state.activeMarker}
						visible={this.state.showingInfoWindow}
						onClose={this.onInfoWindowClose}>
							<div>
								<h1>{this.state.selectedPlace.name}</h1>
							</div>
					</InfoWindow>
				</Map>
		</div>
		)
	}
}

export default GoogleApiWrapper({
	apiKey: MY_API_KEY
})(RegionalMap);

I get an error in the componentDidUpdate function, caused by the line this.marker.setMap(null);. It appears that this error message is occurring because inside the renderMarker function, the google variable is undefined:

				if (!google) {
					return null;
				}

The funny thing is that when I remove the Marker code from the render function, it works perfectly:

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

class RegionalMap extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			showingInfoWindow: false,
			activeMarker: {},
			selectedPlace: {},
		};
	}

	onMarkerClick = (props, marker, e) => {
		this.setState({
			selectedPlace: props,
			activeMarker: marker,
			showingInfoWindow: true
		});
	};

	onInfoWindowClose = () => {
		this.setState({
			showingInfoWindow: false,
			activeMarker: null
		});
	};

	onMapClicked = (props) => {
		if (this.state.showingInfoWindow) {
			this.setState({
				showingInfoWindow: false,
				activeMarker: null
			});
		}
	};

	render() {
		return (
			<div id="google-map-holder">
				<Map google={this.props.google}
						style={{width: '100%', height: '100%', position: 'inherit'}}
						className={'map'}
						zoom={14}
						onClick={this.onMapClicked}>

					<InfoWindow
						marker={this.state.activeMarker}
						visible={this.state.showingInfoWindow}
						onClose={this.onInfoWindowClose}>
							<div>
								<h1>{this.state.selectedPlace.name}</h1>
							</div>
					</InfoWindow>
				</Map>
		</div>
		)
	}
}

Any help?

[jsmapr1]

Right. Those lines are there. The lines that should be there are these:

if (this.props.map !== prevProps.map || this.props.position !== prevProps.position) {
  if (this.marker) {
    this.marker.setMap(null);
  }
  this.renderMarker();
}

That’s the problem.

[nats12]

Are there any updates on whether this is getting fixed?