title: google-maps-react: "google.maps.drawing is not defined"
body: <p>I have a web application that has two versions of Maps using the 'google-maps-react' module.</p>
  
  <p>All the code will be available below.</p>
  
  <p>The point of having two versions (each on a separate .js file) is that I want to have one page showing the map like usual with all the markers showing (also using the places library) <a href="https://i.stack.imgur.com/Ahuf3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ahuf3.png" alt="Full Map with all markers"></a>And another page that uses Google's Drawing Manager, with no markers, and that allows you to place new markers, or polygons, that will become available in the Full Map (first page) after being sent to my server.
  <a href="https://i.stack.imgur.com/IzmFW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IzmFW.png" alt="enter image description here"></a></p>
  
  <p>Now my problem is everytime I'm on the first page and go to the second pages, after a couple seconds the app crashes with "google.maps.drawing" is undefined. But when I start the application on the second page, it never crashes, no matter how many times I switch pages.</p>
  
  <p>I have no idea why this is happening but I assume it has something to do with asynchronous events (???).</p>
  
  <p>Can someone tell me why this is happening and how to fix it?</p>
  
  <p>PS: If anyone has a better way/idea of doing these pages let me know.</p>
  
  <p>CODE TIME:</p>
  
  <p><strong>Map with Drawing Manager:</strong></p>
  
  <pre><code>/* global google */
  import React from 'react';
  import { Map, InfoWindow, GoogleApiWrapper } from 'google-maps-react';
  
  class DrawingMap extends React.Component {
  
    constructor(props) {
      super(props);
      this.initMap = this.initMap.bind(this);
      this.state = {
        ...
      }
    }
  
    initMap(mapProps, map) {
      var self = this;
      const {google} = mapProps;
  
      const drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: null,
        drawingControl: false,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          drawingModes: [
            google.maps.drawing.OverlayType.MARKER,
            google.maps.drawing.OverlayType.POLYGON
          ]
        },
        map: map
      });
  
    /*events and listeners and blah blah*/
    }
  
    render() {
      return (
        &lt;Map google={this.props.google}
             onReady={this.initMap}
             onClick={this.onMapClicked}
             initialCenter={{...}}
             zoom={15}
             yesIWantToUseGoogleMapApiInternals &gt;
        &lt;InfoWindow
          visible={this.showingInfoWindow} &gt;
        &lt;/InfoWindow&gt;
        &lt;/Map&gt;
      );
    }
  }
  
  export default GoogleApiWrapper({
    apiKey: key,
    libraries: ['drawing'],
    LoadingContainer: LoadingContainer
  })(DrawingMap);
  </code></pre>
  
  <p><strong>Map with no Drawing Manager</strong></p>
  
  <pre><code>/* global google */
  import React from 'react';
  import { Map, Marker, Polygon, InfoWindow, GoogleApiWrapper } from "google-maps-react";
  
  class FullMap extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        ..
      }
    }
  
    initMap = (mapProps, map) =&gt; {
      var self = this;
      const { markers } = this.state;
      const {google} = mapProps;
  
      /* event listeners and whatnot */
    }
  
    render() {
      const {markers, zoom, activeMarker, activePolygon, mapCenter} = this.state;
      return (
        &lt;Map google={this.props.google}
             onReady={this.initMap}
             initialCenter={{lat:mapCenter.lat, lng: mapCenter.lng}}
             center={{lat:mapCenter.lat, lng: mapCenter.lng}}
             zoom={14}
             streetViewControl={false}
             yesIWantToUseGoogleMapApiInternals&gt;
        {markers &amp;&amp; markers.map((marker, index) =&gt; marker &amp;&amp; this.loadMarker(marker, index))}
        &lt;/Map&gt;
      );
    }
  }
  
  export default GoogleApiWrapper({
    apiKey: key,
    libraries: ['places','geometry']
  })(FullMap);
  </code></pre>