title: Draw Draggable shapes in google maps v3
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &amp;&amp; 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);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="google-maps"&gt;&lt;div id="gmap"&gt;&lt;/div&gt;&lt;/div&gt;
    
  
  &lt;div id="panel"&gt;
   &lt;p&gt;Presiona shift par dibujar un rectángulo, o selecciona la opción desde el menú de controles superior
    &lt;br/&gt;&lt;/p&gt; 
   &lt;b&gt;Está el marker en el area?:&lt;/b&gt;
   &lt;p id="inside"&gt;...&lt;/p&gt; 
   &lt;b&gt;Coordenadas:&lt;/b&gt;
   &lt;p id="bounds"&gt;...&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;libraries=drawing"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am using this code:</p>
  
  <pre><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
                  });
  </code></pre>
  
  <p>to let the user draw a rectangle or a circle,</p>
  
  <pre><code>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;
  });
  </code></pre>
  
  <p>Which seems to work, except the <code>draggable: true</code> because, Once I drag the shape, it disappears.</p>
  
  <p>Any idea why?</p>