google-maps-react: 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?
About this issue
- Original URL
- State: open
- Created 7 years ago
- Comments: 29 (2 by maintainers)
Right. Those lines are there. The lines that should be there are these:
That’s the problem.
Are there any updates on whether this is getting fixed?
to make a temporary workaround i made it to work like this.
import {InfoWindow, Map, GoogleApiWrapper} from ‘google-maps-react’ import Marker from ‘/imports/ui/components/googlemap/Marker’
copied the Marker component from the repo and paste it to your folder then call it as a single component…
just a temporary though while waiting for the npm package updates
@americool I tried doing what you mentioned.
However I am getting an error with regards to “define” being undefined. How do you get over this?