Remove DrawingManager from Google maps - google-maps

Question

I've created a map where I can draw lines in different colors, works just fine, but when I'm trying to remove my drawings it doesn't work very well. I insert all my DrawingManager into an array, and from there trying to remove them. Anyone can help me please?
See the whole project at http://jsfiddle.net/jv8wp4p0/
$(document).ready(function(){
google.maps.event.addDomListener(window, 'load', initGMap);
var gMap;
var drawingMap = [];
var colorIndex = 0;
function initGMap() {
var mapOptions = {
center: new google.maps.LatLng(63.354122, 16.007140),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
};
gMap = new google.maps.Map(document.getElementById('googleMaps'), mapOptions);
}
$.selMapBtn = function (btnObj) {
$(".mapBtn").removeClass('mapBtnSelected');
if ($(btnObj).hasClass('reMap')) {
// Remove last action...
if(drawingMap.length > 0) {
drawingMap[drawingMap.length-1].setMap(null);
}
}
if ($(btnObj).hasClass('clMap')) {
// Remove all actions...
for(i in drawingMap) {
drawingMap[i].setMap(null);
}
}
if ($(btnObj).hasClass('mapPen')) {
$(btnObj).addClass('mapBtnSelected');
penColor = $(btnObj).data('color');
i = drawingMap.length;
drawingMap[i] = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYLINE,
drawingControl: false,
polylineOptions: {
strokeColor: penColor,
strokeWeight: 5,
clickable: false,
editable: false,
zIndex: 1
}
});
drawingMap[i].setMap(gMap);
}
};
$(".mapBtn").click(function () {
$.selMapBtn($(this));
return false;
});
});

Answer 1

Basically you don't need multiple DrawingManager-instances at all, the options of a DrawingManager may be set dynamically(e.g. the PolylineOptions in your code).
To access the shapes created by the DrawingManager you must store them somewhere(e.g. in an array). Observe the overlaycomplete-event of the DrawingManager, that's the moment when you may access a newly created shape.
$(document).ready(function () {
google.maps.event.addDomListener(window, 'load', initGMap);
var gMap,
drawings = [],
drawingMan,
colorIndex = 0;
function initGMap() {
var mapOptions = {
center: new google.maps.LatLng(63.354122, 16.007140),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
};
gMap = new google.maps.Map(document.getElementById('googleMaps'),
mapOptions);
drawingMan = new google.maps.drawing.DrawingManager({
drawingControl: false
});
google.maps.event.addListener(drawingMan, 'overlaycomplete',
function (shape) {
//push shape onto the array
drawings.push(shape.overlay);
});
}
$.selMapBtn = function (btnObj) {
$(".mapBtn").removeClass('mapBtnSelected');
if ($(btnObj).hasClass('reMap')) {
drawingMan.setDrawingMode(null);
if (drawings.length) {
//remove last shape
drawings.pop().setMap(null);
}
}
if ($(btnObj).hasClass('clMap')) {
drawingMan.setDrawingMode(null);
//remove all shapes
while (drawings.length) {
drawings.pop().setMap(null);
}
}
if ($(btnObj).hasClass('mapPen')) {
$(btnObj).addClass('mapBtnSelected');
penColor = $(btnObj).data('color');
drawingMan.setOptions({
polylineOptions: {
strokeColor: penColor,
strokeWeight: 5,
clickable: false,
editable: false,
zIndex: 1
},
map: gMap,
drawingMode: google.maps.drawing.OverlayType.POLYLINE
});
}
};
$(".mapBtn").click(function () {
$.selMapBtn($(this));
return false;
});
});
http://jsfiddle.net/jv8wp4p0/3/