Draw Draggable shapes in google maps v3

Question

var drawingManager;
var lastShape;
var map;

function initialize() {
	map = new google.maps.Map(document.getElementById('gmap'), {
		zoom: 3,
		center: new google.maps.LatLng(-25.165, 133.769),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		disableDefaultUI: true,
		zoomControl: true
	});

	var shapeOptions = {
		strokeWeight: 1,
		strokeOpacity: 1,
		fillOpacity: 0.2,
		editable: true,
		draggable: true,
		clickable: false,
		strokeColor: '#3399FF',
		fillColor: '#3399FF'
	};
	// create marker
	var m1 = new google.maps.Marker({
		position: new google.maps.LatLng(-25.165, 133.769),
		map: map,
		title: 'Hello Australia!'
	});
	// create a drawing manager attached to the map to allow the user to draw
	// markers, lines, and shapes.
	drawingManager = new google.maps.drawing.DrawingManager({
		drawingMode: null,
		drawingControlOptions: {
			drawingModes: [google.maps.drawing.OverlayType.CIRCLE, 			google.maps.drawing.OverlayType.RECTANGLE]
		},
		rectangleOptions: shapeOptions,
		circleOptions: shapeOptions,
		Options: shapeOptions,
		map: map
	});
	google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
		if (lastShape != undefined) {
			lastShape.setMap(null);
		}
		// cancel drawing mode
		if (shift_draw == false) {
			drawingManager.setDrawingMode(null);
		}
		lastShape = e.overlay;
		lastShape.type = e.type;			

		lastBounds = lastShape.getBounds();
		$('#bounds').html(lastBounds.toString());
		// determine if marker1 is inside bounds:
		if (lastBounds.contains(m1.getPosition())) {
			$('#inside').html('Si!');
		} else {
			$('#inside').html('No...');
		}
		
	});
	var shift_draw = false;
	$(document).bind('keydown', function (e) {
		if (e.keyCode == 16 && shift_draw == false) {
			map.setOptions({
				draggable: false,
				disableDoubleClickZoom: true
			});
			shift_draw = true; // enable drawing
			drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
		}
	});
	$(document).bind('keyup', function (e) {
		if (e.keyCode == 16) {
			map.setOptions({
				draggable: true,
				disableDoubleClickZoom: true
			});
			shift_draw = false // disable drawing
			drawingManager.setDrawingMode(null);
		}
	});
	
	
	
}
google.maps.event.addDomListener(window, 'load', initialize);

body {
	background: #f5f5f5 url('../images/bg.jpg') no-repeat left top;
}
.google-maps {
	position: relative;
	height: 0;
	padding-bottom: 25%;
}

#gmap {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

<div class="google-maps"><div id="gmap"></div></div>
		

<div id="panel">
	<p>Presiona shift par dibujar un rectángulo, o selecciona la opción desde el menú de controles superior
		<br/></p> 
	<b>Está el marker en el area?:</b>
	<p id="inside">...</p> 
	<b>Coordenadas:</b>
	<p id="bounds">...</p>
</div>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

I am using this code:

map = new google.maps.Map(document.getElementById('gmap'), {
                    zoom: 3,
                    center: new google.maps.LatLng(-25.165, 133.769),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: true,
                    zoomControl: true
                });

                var shapeOptions = {
                    strokeWeight: 1,
                    strokeOpacity: 1,
                    fillOpacity: 0.2,
                    editable: true,
                    draggable: true, /* It doesn't seem to work */
                    clickable: false,
                    strokeColor: '#3399FF',
                    fillColor: '#3399FF'
                };
                // create marker
                var m1 = new google.maps.Marker({
                    position: new google.maps.LatLng(-25.165, 133.769),
                    map: map,
                    title: 'Hello Australia!'
                });
                // create a drawing manager attached to the map to allow the user to draw
                // markers, lines, and shapes.
                drawingManager = new google.maps.drawing.DrawingManager({
                    drawingMode: null,
                    drawingControlOptions: {
                        drawingModes: [google.maps.drawing.OverlayType.CIRCLE,          google.maps.drawing.OverlayType.RECTANGLE]
                    },
                    rectangleOptions: shapeOptions,
                    circleOptions: shapeOptions,
                    Options: shapeOptions,
                    map: map
                });

to let the user draw a rectangle or a circle,

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
                if (lastShape != undefined) {
                    lastShape.setMap(null);
                }
                // cancel drawing mode
                if (shift_draw == false) {
                    drawingManager.setDrawingMode(null);
                }
                lastShape = e.overlay;
                lastShape.type = e.type;
});

Which seems to work, except the draggable: true because, Once I drag the shape, it disappears.

Any idea why?

Answer 1

If you set "clickable" to true, you will be able to drag the shape:

    var shapeOptions = {
        strokeWeight: 1,
        strokeOpacity: 1,
        fillOpacity: 0.2,
        editable: true,
        draggable: true,
        clickable: true,
        strokeColor: '#3399FF',
        fillColor: '#3399FF'
    };