How to remove previous shape when drawing new shape is started on Google Map

Question

I am currently working on a map-based web application. Previous rectangle (or polygon) that is already drawn should be deleted before I draw new rectangle by drawing layer tool on Google Map.

There is "overlaycomplete" event on Google Map, but if I use it, previous rectangle is removed after drawing new rectangle is completed(mouse-up). However, I need to remove previous rectangle before process of drawing new rectangle starts(mouse-down). Two rectangle should not be seen at the same time on the map!

All feedbacks appreciated!

Here is jsFiddle! - http://jsfiddle.net/sean35/41Lrcq7L/30/

Example code:

function initialize() {

var centerInfo = document.getElementById("mainForm:centerInfo").value;
var zoomInfo = document.getElementById("mainForm:zoomInfo").value;
centerInfo = centerInfo.split(",");

var mapOptions = {
    center : {
        lat : parseFloat(centerInfo[0]),
        lng : parseFloat(centerInfo[1])
    },
    zoom : parseInt(zoomInfo)
};
map = new google.maps.Map(document.getElementById('deviceControlMap'), mapOptions);

var drawingManager = new google.maps.drawing.DrawingManager({
    // drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControl : true,
    drawingControlOptions : {
        position : google.maps.ControlPosition.TOP_CENTER,
        drawingModes : [
        // google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.RECTANGLE ]
    },
    rectangleOptions : {
        strokeWeight : 1,
        clickable : true,
        editable : false,
        zIndex : 1
    }
});
drawingManager.setMap(map);

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
        if(rectangle != null)
            rectangle.setMap(null);
        closeDimSubWin();
        rectangle = event.overlay;
        var bounds = rectangle.getBounds();
        console.log(bounds);
    }
});

google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
    if(rectangle != null)
        rectangle.setMap(null);
});

// when the user clicks somewhere else on the map.
google.maps.event.addListener(map, 'click', function() {    
    if(rectangle != null)
        rectangle.setMap(null);
});
}
google.maps.event.addDomListener(window, 'load', initialize);

EDIT: I wrote two similar question before. But I deleted them and wrote this question with extended information. I hope that the question is understandable.

Answer 1

One option:

1. set the drawing mode to null on rectanglecomplete

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
        if(rectangle != null)
            rectangle.setMap(null);
        rectangle = event.overlay;
        var bounds = rectangle.getBounds();
        console.log(bounds);
        drawingManager.setDrawingMode(null);
    }
});

2. remove the rectangle when it is changed back to RECTANGLE

google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
    if ((drawingManager.getDrawingMode() == google.maps.drawing.OverlayType.RECTANGLE) && 
        (rectangle != null))
        rectangle.setMap(null);
});

updated fiddle

code snippet:

/*
 * declare map as a global variable
 */
var map;

var rectangle = null;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function() {

  var mapOptions = {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 4,
  };
  map = new google.maps.Map(document.getElementById('deviceControlMap'), mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    // drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        // google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    rectangleOptions: {
      strokeWeight: 1,
      clickable: true,
      editable: false,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
      if (rectangle != null)
        rectangle.setMap(null);
      rectangle = event.overlay;
      var bounds = rectangle.getBounds();
      console.log(bounds);
      drawingManager.setDrawingMode(null);
    }
  });

  google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
    if ((drawingManager.getDrawingMode() == google.maps.drawing.OverlayType.RECTANGLE) &&
      (rectangle != null))
      rectangle.setMap(null);
  });

  // when the user clicks somewhere else on the map.
  google.maps.event.addListener(map, 'click', function() {
    if (rectangle != null)
      rectangle.setMap(null);
  });
});

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="deviceControlMap" style="height: 400px;"></div>