Uncaught TypeError: Cannot read property 'overlayMouseTarget' of null

I previously posted this on StackOverflow but since this is less of a “how to” question and more a case of “there might be a bug with the Overlay component”, I decided to repost it here.

When leaving the page that has the map with some OverlayView’s, 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>
));

Could it be that something is missing in the componentWillUnmount?

[owap]

Taking @foloinfo’s advice, I implemented the following class in my project that eliminates the errors. Hopefully this will help somebody else, too!

import React from 'react';
import ReactDOM from 'react-dom';
import invariant from 'invariant';
import { OverlayView } from 'react-google-maps';
import { OVERLAY_VIEW } from 'react-google-maps/lib/constants';

export default class CustomOverlayView extends OverlayView {
  // Override draw function to catch errors with map panes being undefined to prevent console errors
  draw() {
    const { mapPaneName } = this.props;
    invariant(
      !!mapPaneName,
      `OverlayView requires either props.mapPaneName or props.defaultMapPaneName but got %s`,
      mapPaneName
    );
    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
    const mapPanes = this.state[OVERLAY_VIEW].getPanes();
    if (mapPanes && this.containerElement) { // <-- Add conditional to ensure panes and container exist before drawing
      mapPanes[mapPaneName].appendChild(this.containerElement);

      ReactDOM.unstable_renderSubtreeIntoContainer(
        this,
        React.Children.only(this.props.children),
        this.containerElement,
        this.onPositionElement
      );
    }
  }
}

[amangeot]

If it can help, after reading #405 , I added key={Math.random()} to <OverlayView /> and the error message disappeared.

I’m not sure if this is related but the width and height passed down to getPixelPositionOffset is sometimes wrong. I receive (0px, 13px) whereas my markers are (24px, 32px). It leads to a misplaced overlay on the map.

---

Here is the code with the GoogleMap component

      <GoogleMap ref={this.handleMapRef} {...this.optionalProps}
        defaultCenter={defaultCenter} defaultOptions={defaultOptions} defaultZoom={defaultZoom}
        onDragStart={this.handleDragStart} onIdle={this.handleIdle}>
        {this._selectedMarker && (
          <OverlayView /***** --> key={Math.random()} <-- *****/ position={{ lat, lng }}
            getPixelPositionOffset={this.getPixelPositionOffset}
            defaultMapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}>
            <img src={getMarkerIcon(poiType, true)} />
          </OverlayView>
        )}
        <MarkerClusterer onMarkerClick={this.handleMarkerClick} />
      </GoogleMap>