React-google-maps: Removing an overlay (e.g. rectangle) on click

[craigcartmell]

I couldn't find this in the docs but I'm trying to work out how to remove a rectangle on click.

I can draw rectangles fine and handle a click event which gives me some coordinates, so do I need to manually work it out from there?

Or is there an easier way to do this?

My current render looks like this:

 <GoogleMapLoader
      query={{libraries: "drawing"}}
      containerElement={<div style={{height: "100%"}}></div>}
      googleMapElement={
        <GoogleMap defaultZoom={14} onClick={(e) => {
          return console.log("clicked", e)
        }}>
          <DrawingManager
            defaultDrawingMode={this.google.maps.drawing.OverlayType.RECTANGLE}
            defaultOptions={{
              drawingControl: true,
              drawingControlOptions: {
                position: this.google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                  this.google.maps.drawing.OverlayType.RECTANGLE,
                ],
              }
            }}
            onRectanglecomplete={this.handleRectangleComplete}
          />
        </GoogleMap>
      }

[ayushbhagat]

Another way of doing this would be to make the Rectangle component controlled, instead of letting the DrawingManager handle it. Here is a code snippet:

state = {
  bounds: new google.maps.LatLngBounds()
}

handleRectangleComplete = rectangle => {
  // Clear the rectangle managed by DrawingManager.
  google.maps.event.clearInstanceListeners(rectangle);
  rectangle.setMap(null);
  // Set its values to the one stored in our state.
  this.setState({bounds: rectangle.getBounds()});
}

handleClick = e => {
  // Set it to empty bounds to delete the rectangle from the map.
  this.setState({bounds: new google.maps.LatLngBounds()});
}

render() {
  <GoogleMapLoader
    query={{libraries: "drawing"}}
    containerElement={<div style={{height: "100%"}}></div>}
    googleMapElement={
      <GoogleMap
        defaultZoom={14}
        onClick={this.handleClick}
      >
        <DrawingManager
          defaultDrawingMode={this.google.maps.drawing.OverlayType.RECTANGLE}
          defaultOptions={{
            drawingControl: true,
            drawingControlOptions: {
              position: this.google.maps.ControlPosition.TOP_CENTER,
              drawingModes: [
                this.google.maps.drawing.OverlayType.RECTANGLE,
              ],
            }
          }}
          onRectanglecomplete={this.handleRectangleComplete}
        />
        {!this.state.bounds.isEmpty() ? (
          <Rectangle
            bounds={this.state.bounds}
          />
        ) : null}
      </GoogleMap>
    }
  />
}

[craigcartmell]

Yep, that's the route I ended up going down.

Thanks!

[ayushbhagat]

Cool! No problem!

[tomchentw]

Thanks for @ayushbhagat for answering!

Also, 6.0.0 is released on npm beta tag now. We also have a new demo page. Feel free to try it:
https://tomchentw.github.io/react-google-maps/