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 ponent 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 ponent 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);
  }

  ponentDidMount () {
    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);
  }

  ponentDidUpdate () {
    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?

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 ponent 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 ponent 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);
  }

  ponentDidMount () {
    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);
  }

  ponentDidUpdate () {
    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?

• javascript
• reactjs
• google-maps

Share Improve this question Follow asked Jul 31, 2018 at 22:10 mwjohnson324mwjohnson324 2111 gold badge11 silver badge44 bronze badges 1

• 2 Nevermind, figured out the problem. The problem was this line: ponentDidMount () { this.map = new google.maps.Map(this.mapRef.current.outerHTML); I needed to pass it this.mapRef.current. Instead of passing in an html element I was passing a string representation of it. – mwjohnson324 Commented Jul 31, 2018 at 23:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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();

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