CODEWITHSUNDEEP
javascriptreactjsgoogle-maps
mwjohnson324
mwjohnson324

Reputation: 21

Google Maps "Uncaught TypeError: Cannot read property 'defaultView' of undefined"

I keep getting this error in when trying to load a google map in React:

"Uncaught TypeError: Cannot read property 'defaultView' of undefined"

I have this component which loads a Google map but it's failing and I can't figure out where it's going wrong. I believe the error is confined to this component because the app renders successfully but the map doesn't display inside it because of the above error. 

class DoctorsMap extends React.Component {
  constructor(props) {
    super(props);
    this.geocoder = new google.maps.Geocoder();
    this.mapRef = React.createRef();
    this.handleMarkerClick = this.handleMarkerClick.bind(this);
    this.setTheCenter = this.setTheCenter.bind(this);
  }

  componentDidMount () {
    this.map = new google.maps.Map(this.mapRef.current.outerHTML);
    this.setTheCenter();
    this.markerManager = new MarkerManager(this.map, this.handleMarkerClick);
    this.markerManager.updateMarkers(this.props.doctors);
  }

  componentDidUpdate () {
    return this.markerManager.updateMarkers(this.props.doctors);
  }

  setTheCenter() {
    this.geocoder.geocode({address: `${this.props.address}`}, (results, status) => {
      if (status === google.maps.GeocoderStatus.OK) {
        const coordinates = results[0].geometry.location;
        this.map.setCenter(coordinates);
        this.map.setZoom(11);
      } else {
        alert("Geocode failed: " + status);
      }
    });
  }

  handleMarkerClick(doctor) {
    return this.props.history.push(`/doctor/${doctor.id}`);
  }

  docSearchToggle() {
    if (this.props.location.pathname.includes("/doctor/")) {
      return ["map-doc-canvas", "map-doc-container"];
    } else {
      return ["map-search-canvas", "map-search-container"];
    }
  }

  render () {
    return(
      <div id={this.docSearchToggle()[1]}>
        <div id={this.docSearchToggle()[0]} ref={this.mapRef}></div>
      </div>
    );
  }
}

Any ideas?

Upvotes: 2

Views: 10064

Answers (2)

Kaiwei Yang
Kaiwei Yang

Reputation: 1

Just new google.maps.Map(this.mapRef.current). require a HTMLElement but you support a string(HTMLElement.outerHTML)

Upvotes: 0

Madhu
Madhu

Reputation: 31

if below code it help to your issue

If your are using Sapui5 use this code

sap.ui.getCore().byId("Your Id").getDomRef();

OR

this.getView().byId("Your ID").getDomRef();

If you are using HTML

document.getElementById("Your Id").getDomRef();

Upvotes: 2

Related Questions