CODEWITHSUNDEEP
javascriptgoogle-mapsreactjs
fcarle
fcarle

Reputation: 65

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

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!

Upvotes: 3

Views: 2171

Answers (1)

thinhvo0108
thinhvo0108

Reputation: 2242

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

Upvotes: 1

Related Questions