<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>My React Project on CodePen</title>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
</head>

<body>
  <div id="app"></div>
</body>
</html>
#map-canvas{
  height: 500px;
  width: 500px;
  border: 3px solid black;
}

.body.fullscreen {
  width: 100vw;
  height: 100vh;
}

.map-container {
  width: 100%;
  height: 100%;
  background: aliceblue;
}
View Compiled
const MapContext = React.createContext({ map: null });

(function() {
   const MapContext = React.createContext({ map: null });

  /**
   * Map Class
   */
   class Map extends React.Component {
      /** Map instance */
      map = null;

      /** 
      * mount point for the map element.
      * The map canvas gets rendered in this container. 
      */
      mapContainer = React.createRef();

      componentDidMount() {
         this.initMap();
      }

      initMap() {
         /** Create new google map. */
         this.map =
            this.map ||
            new google.maps.Map(this.mapContainer.current, {
            zoom: this.props.zoom,
            center: this.props.center
         });
         this.setState({ done: true });
      }

      render() {
         return (
            <div class="map-container" ref={this.mapContainer}>
               <MapContext.Provider value={{ map: this.map }}>
                  {this.props.children}
               </MapContext.Provider>
            </div>
         );
      }
   }
   /**
   * Marker Class
   */
   class Marker extends React.Component {
       componentWillUnmount() {
         // Remove marker on component unmount
         this.marker && this.marker.setMap(null);
      }

      drawMarker(map, lat, lng) {
         if (!this.marker) {
            this.marker = new google.maps.Marker({
               map: map,
               position: { lat, lng },
               visible: true
            });
         }
         this.marker.setPosition({ lat, lng });
         return this.marker;
      }

      render() {
         return (
            <MapContext.Consumer>
               {mapContext => {
                  const { map } = mapContext;
                  const { lat, lng } = this.props;

                  // render marker
                  const marker = map && this.drawMarker(map, lat, lng);
                  return null;
               }}
            </MapContext.Consumer>
         );
      }
   }

   class App extends React.Component {
      render() {
         return (
            <div className="body fullscreen">
               <Map
                  zoom={13}
                  center={{
                     lat: 37.8145864,
                     lng: -122.4784945
                  }}>
                  <Marker lat={37.799} lng={-122.4341} />
                  <Marker lat={37.823} lng={-122.47844} />
               </Map>
            </div>
         );
      }
   }

   ReactDOM.render(<App />, document.getElementById('app'));

})();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js