How to Temporarily Stop Drawing After Rectangle Complete

Question

Can you please take a look at This Demo and let me know how I can stop drawing mood (until next click on rectangle drawing button) and change the cursor to google maps regular cursor (the way it looks after clicking on button) in rectanglecomplete event listener?

I already tried adding the drawingManager.setMap(null); into the listener but this is disabling whole drawing proccess.

$(document).ready(function () {
var map;
var drawingManager;
var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'),mapOptions);

var drawingManager = new google.maps.drawing.DrawingManager({
    drawingControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT,
        drawingModes: [
             google.maps.drawing.OverlayType.RECTANGLE      ]
    }
});

google.maps.event.addListener(drawingManager, 'rectanglecomplete', function (r) {
   // drawingManager.setMap(null);
});

drawingManager.setMap(map);
});

Answer 1

from the documentation:

drawingMode Type: OverlayType The DrawingManager's drawing mode, which defines the type of overlay to be added on the map. Accepted values are MARKER, POLYGON, POLYLINE, RECTANGLE, CIRCLE, or null. A drawing mode of null means that the user can interact with the map as normal, and clicks do not draw anything.

google.maps.event.addListener(drawingManager, 'rectanglecomplete', function (r) {
   drawingManager.setDrawingMode(null);
});

updated fiddle

code snippet:

$(document).ready(function() {
  var map;
  var drawingManager;
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_LEFT,
      drawingModes: [
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    }
  });

  google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(r) {
    drawingManager.setDrawingMode(null);
  });

  drawingManager.setMap(map);
});

#map {
  height: 420px;
  width: 600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"></script>
<div id="map"></div>

<div id="marker-position"></div>