Draw and delete polygon in google map - google-maps

Question

I try to draw polygon on button click and delete polygon from another button, it's working fine first time but after delete I can't draw another polygon. Please guide me. Here is code snippet:
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true,
fillColor: '#FF1493'
};
var selectedShape;
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
markerOptions: {
draggable: true
},
polygonOptions: polyOptions
});
$('#enablePolygon').click(function(){
drawingManager.setMap(map);
});
$('#resetPolygon').click(function(){
if (selectedShape) {
selectedShape.setMap(null);
}
drawingManager.setMap(null);
$('#showonPolygon').hide();
$('#resetPolygon').hide();
});
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
}
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
all_overlays.push(e);
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
Here I show reset button on polygon complete event and try to find area of current polygon:
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
// var area = google.maps.geometry.spherical.computeArea(selectedShape.getPath());
// $('#areaPolygon').html(area.toFixed(2)+' Sq meters');
$('#resetPolygon').show();
});
Here is HTML:
<input type="button" id="enablePolygon" value="Calculate Area" />
<input type="button" id="resetPolygon" value="Reset" style="display: none;" />
<div id="showonPolygon" style="display:none;"><b>Area:</b> <span id="areaPolygon"> </span></div>

Answer 1

You are setting the DrawingMode of the DrawingManager to null. When you re-enable the DrawingManager, you need to set it back to google.maps.drawing.OverlayType.POLYGON.
$('#enablePolygon').click(function() {
drawingManager.setMap(map);
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
});
proof of concept fiddle
code snippet:
var geocoder;
var map;
var all_overlays = [];
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true,
fillColor: '#FF1493'
};
var selectedShape;
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
markerOptions: {
draggable: true
},
polygonOptions: polyOptions
});
$('#enablePolygon').click(function() {
drawingManager.setMap(map);
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
});
$('#resetPolygon').click(function() {
if (selectedShape) {
selectedShape.setMap(null);
}
drawingManager.setMap(null);
$('#showonPolygon').hide();
$('#resetPolygon').hide();
});
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
// var area = google.maps.geometry.spherical.computeArea(selectedShape.getPath());
// $('#areaPolygon').html(area.toFixed(2)+' Sq meters');
$('#resetPolygon').show();
});
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
}
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
all_overlays.push(e);
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<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?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" id="enablePolygon" value="Calculate Area" />
<input type="button" id="resetPolygon" value="Reset" style="display: none;" />
<div id="showonPolygon" style="display:none;"><b>Area:</b> <span id="areaPolygon"> </span>
</div>
<div id="map_canvas"></div>