react-google-maps Uncaught TypeError: Cannot read property 'overlayMouseTarget' of null

Question

I'm using the react-google-maps package and when leaving the page that has the map, I get the error message:

Uncaught TypeError: Cannot read property 'overlayMouseTarget' of null

Here is the code with the GoogleMap component:

const GMap = withGoogleMap((props) => (
  <GoogleMap
    ref={props.onMapMounted}
    defaultZoom={12}
    zoom={props.zoom}
    onDragEnd={props.onZoomChanged}
    onZoomChanged={props.onZoomChanged}
    defaultCenter={props.defaultCenter}
    center={props.center}
  >
    {
      props.markers && props.markers.map((data, index) => (
        <OverlayView
          key={index}
          position={{
            lat: data.get('loc').get('geo').get('lat'),
            lng: data.get('loc').get('geo').get('lng'),
          }}
          mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
          getPixelPositionOffset={(width, height) => ({ x: -(width / 2), y: -(height) })}
        >
          <WnmMarker
            text={data.get('text')}
            highlight={data.get('highlight')}
          />
        </OverlayView>
      ))
    }
  </GoogleMap>
));

Can anyone point me to what might be causing this?

Thanks!

score 1 · Answer 1 · edited May 23 '17 at 10:31

It seems that when you leave the page, the map element no longer exists but the event bound to it is still there!

According to React Component Life Cycle, we may wanna have a pair of the following in your component: componentDidMount and * componentWillUnmount*

constructor(props) {
  super(props);
  // ...
}

componentDidMount() {
  // bind the event
}

componentWillUnmount() {
  // unbind the event
}

render() {
  // ...
}

I don't know if you already have the above pair for initializing your map and its event.

However, there's still a lot of google map libraries out there, but not sure all of them handle all the events according to React Component Life Cycle well. There's another one below, and I also have simple guides based on it:

My guides:

Implementing google maps with react

How to incorporate <script> in React to add Google Maps instance

The library: https://github.com/istarkov/google-map-react

If this is still not what you want, feel free to post more code from yours for reference, then we may together find the best way

Your answer makes sense. I think the issue has to do with rendering the list of OverlayViews inside the GoogleMap component itself and them not being removed prior the Map instance removal. I will try generating the list from the component that renders the GMap component and see if it changes the behavior. As for google-map-react, I was using it before and decided to switch to react-google-maps as I found it a bit more complete. — fcarle, Apr 28 '17 at 05:58

react-google-maps Uncaught TypeError: Cannot read property 'overlayMouseTarget' of null

1 Answers1