How to access the methods of the react-google-maps components?

Question

I have a map component that uses the react-google-maps library. I want to be able to draw on that map some polygons and some markers. I have added the drawing controls for that and I am able to use them correctly. Now I want to be able to persist the selected drawing control after rerender and not to fall back to the defaultDrawingMode prop. I thought to use the getDrawingControl method and save it in state and just use that in defaultDrawingMode prop so that the control changes with the users actions. The problem is I dont know how to use the methods of the components.

I tried messing with refs but I don't have any similar experience and I am struggling.

const MyMapComponent = compose(
      withProps({
        googleMapURL:
          "https://maps.googleapis.com/maps/api/js?key=&v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `600px` }} />,
        mapElement: <div style={{ height: `100%` }} />
      }),
      withScriptjs,
      withGoogleMap
    )(props => (
      <GoogleMap defaultZoom={13} defaultCenter={{ lat: 38.022871, lng: 23.790431 }}>
        <DrawingManager
          defaultDrawingMode={this.state.currentDrawingMode}
          defaultOptions={{
            drawingControl: true,
            drawingControlOptions: {
              position: google.maps.ControlPosition.TOP_CENTER,
              drawingModes: [
                google.maps.drawing.OverlayType.POLYGON,
                google.maps.drawing.OverlayType.MARKER
              ]
            },
            polygonOptions: this.colorOptions()
          }}
          onPolygonComplete={this.onPolygonCompleted}
          onMarkerComplete={this.onMarkerCompleted}
        />
        {this.renderPreviousPolygons()}
        {this.renderPatients()}
      </GoogleMap>
    ));

So I need to learn how to access the methods of the various components of that library. From what I have seen the documentation of the library is a mess and I would appreciate some tips. Thanks

score 0 · Answer 1 · answered Aug 28 '19 at 08:50

Found a way to be able to use the method and save the result in the state of the class that contains the map.

const MyMapComponent = compose(
  withProps({
    googleMapURL:
      "https://maps.googleapis.com/maps/api/js?key=&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `600px` }} />,
    mapElement: <div style={{ height: `100%` }} />
  }),
  lifecycle({
    componentWillMount() {
      const refs = {};

      this.setState({
        onDrawingManagerMounted: ref => {
          refs.DrawingManager = ref;
        },

        drawingModeChanged: () => {
          const mode = refs.DrawingManager.getDrawingMode();
          return mode;
        }
      });
    }
  }),
  withScriptjs,
  withGoogleMap
)(props => (
  <GoogleMap defaultZoom={13} defaultCenter={{ lat: 38.022871, lng: 23.790431 }}>
    <DrawingManager
      ref={props.onDrawingManagerMounted}
      defaultDrawingMode={this.state.currentDrawingMode}
      defaultOptions={{
        drawingControl: true,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          drawingModes: [
            google.maps.drawing.OverlayType.POLYGON,
            google.maps.drawing.OverlayType.MARKER
          ]
        },
        polygonOptions: this.colorOptions()
      }}
      onPolygonComplete={e => {
        this.onPolygonCompleted(e);
        this.setState({ currentDrawingMode: props.drawingModeChanged() });
      }}
      onMarkerComplete={e => {
        this.onMarkerCompleted(e);
        this.setState({ currentDrawingMode: props.drawingModeChanged() });
      }}
    />
    {this.renderPreviousPolygons()}
    {this.renderPatients()}
  </GoogleMap>
));

How to access the methods of the react-google-maps components?

1 Answers1