Having trouble getting google map to appear on react page

Question

I am simply trying to put a google map on a page to start in a react project, and am having trouble. The div with the id="map" shows, but not the map inside it.

I'm following the google map API docs for JS, but obviously I must be doing something wrong. I would like to avoid using react-google-maps since I am used to using straight google maps api in another framework.

Here is my component google_map.js:

import React, { Component } from 'react';

class GoogleMap extends Component {
    componentDidMount() {
    new google.maps.Map(this.refs.map, {
      zoom: 12,
      center: {
        lat: 37.7952,
        lng: -122.4029
      }
    });
  }

  render() {
    return <div ref="map" />;
  }
}

export default GoogleMap;

import React, { Component } from 'react'; import GoogleMap from './google_map';

Here is where I am trying to put the map:

class Feature extends Component {

  render() {

    return (
      <div id="map">
        <GoogleMap />
      </div>
    );
  }
}


export default Feature;

Style.css:

#map {
  height: 300px;
}

html, body {
  height: 100%;
   margin: 0;
   padding: 0;
}

I fixed it by adding: #map > div:first-child { height: 100%; width: 100%; } — bigmugcup

asiniy asiniy · Accepted Answer · 2018-04-12T03:41:49

I presume you have to add

shouldComponentUpdate {
  return false
}

to your GoogleMap component.

Explanation: probably, React.js synchronizes its virtual DOM with real (which is going to be modified by google maps). Further reading: https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Having trouble getting google map to appear on react page

1 Answers