google-maps-react: "google.maps.drawing is not defined"

Question

I have a web application that has two versions of Maps using the 'google-maps-react' module.

All the code will be available below.

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) 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.

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.

I have no idea why this is happening but I assume it has something to do with asynchronous events (???).

Can someone tell me why this is happening and how to fix it?

PS: If anyone has a better way/idea of doing these pages let me know.

CODE TIME:

Map with Drawing Manager:

/* 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 (
      <Map google={this.props.google}
           onReady={this.initMap}
           onClick={this.onMapClicked}
           initialCenter={{...}}
           zoom={15}
           yesIWantToUseGoogleMapApiInternals >
      <InfoWindow
        visible={this.showingInfoWindow} >
      </InfoWindow>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: key,
  libraries: ['drawing'],
  LoadingContainer: LoadingContainer
})(DrawingMap);

Map with no Drawing Manager

/* 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) => {
    var self = this;
    const { markers } = this.state;
    const {google} = mapProps;

    /* event listeners and whatnot */
  }

  render() {
    const {markers, zoom, activeMarker, activePolygon, mapCenter} = this.state;
    return (
      <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>
      {markers && markers.map((marker, index) => marker && this.loadMarker(marker, index))}
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: key,
  libraries: ['places','geometry']
})(FullMap);

Answer 1

const drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: null,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: [
      google.maps.drawing.OverlayType.MARKER,
      google.maps.drawing.OverlayType.POLYGON,
    ],
  },
  map: map,
});

===> drawingControl: true

Answer 2

您只需将绘图添加到您的库数组中，返回的地图上就会有绘图道具。