Clear Only Rectangle Drawing(Not Markers) - google-maps

Question

Can you please take a look at this Demo and let me know how I can clear ONLY the Rectangle (Not Markers) after zoom in finshed.
I already tried adding the map.setMap(null); into rectanglecomplete but it is not working besides I think this might remove all drawing even the markers from the map which I do not want to do
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
map.fitBounds(r.getBounds());
map.setMap(null);
});
Update
I also tried this:
var drawings = [];
function deleteRect() {
for (var i=0; i < drawings.length; i++)
{
drawings[i].overlay.setMap(null);
}
drawings = [];
}
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
drawings.push(r);
map.fitBounds(r.getBounds());
deleteRect()
});
but still no success and I am getting the
Uncaught TypeError: Cannot read property 'setMap' of undefined
in the console!
code snippet:
var map;
var drawingManager
$(document).ready(function () {
var latlng = new google.maps.LatLng(49.241943, -122.889318);
var myOptions = {
zoom: 12,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE]
}
});
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
map.fitBounds(r.getBounds());
});
drawingManager.setMap(map);
});
body {
padding-top:25px;
}
#map_canvas {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
<div class="container">
<div class="well">
<div id="map_canvas"></div>
</div>
</div>

Answer 1

You can draw a transparent rectangle this way
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: {
fillColor: '#cccccc',
fillOpacity: 0,
strokeWeight: 5,
}
});
and for remove the rectangle use
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
map.fitBounds(r.getBounds());
r.setMap(null);
});
like this sample