DrawingManager with complete events

Working fine w/o mousemove on the map and the rect.

by mark69_fnd

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      input[type=button] { margin: 2px; }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry&libraries=drawing">
    </script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="autoGrowInput.js"></script>
    <script type="text/javascript" src="rect.js"></script>
</head>
  <body>
      <div style="display: table; height: 100%; width: 100%;">
        <div id="data" style="display: table-row; height: 20px;">
            <div style="display: table-cell;">
                <label id="lblCurrentPos" />
             </div>
          </div>
          <div style="display: table-row; ">
               <div id="map_canvas" style="display: table-cell;"></div>
           </div>
       </div>
  </body>
</html>

JavaScript

var G = google.maps;
var map;
var rect;
var drawingManager;

$(document).ready(initialize);

function initialize() {
    var chicago = new G.LatLng(41.850033, -87.6500523);
    var myOptions = {
        zoom: 7,
        center: chicago,
        mapTypeId: G.MapTypeId.ROADMAP
    };
    map = new G.Map($('#map_canvas')[0], myOptions);

    drawingManager = new G.drawing.DrawingManager({
        drawingMode: G.drawing.OverlayType.RECTANGLE,
        drawingControl: true,
        drawingControlOptions: {
            position: G.ControlPosition.TOP_CENTER,
            drawingModes: [G.drawing.OverlayType.RECTANGLE]
        },
        rectangleOptions: {
            editable: true,
            fillColor: "black",
            fillOpacity: 0.1,
            map: map,
            strokeColor: "black",
            strokeWeight: 1
        }
    });
    drawingManager.setMap(map);

    G.event.addListener(map, 'mousemove', function(event) {
        $('#lblCurrentPos').html(getLocationText(event.latLng));
    });

    //    G.event.addListener(rect, 'mousemove', function (event) {
    //        $('#lblCurrentPos').html(getLocationText(event.latLng));
    //    });
    G.event.addListener(drawingManager, 'rectanglecomplete', function(subject) {
        if (rect) {
            G.event.clearInstanceListeners(rect);
            rect.setMap(null);
        }
        rect = subject;
        G.event.addListener(rect, 'bounds_changed', shapeChanged);
        shapeChanged();
    });

    $('#txtShape').autoGrowInput();
}

function trunc(x) {
    return Math.round(x * 1000) / 1000;
}

function getLocationText(location) {
    return '[' + trunc(location.lng()) + ',' + trunc(location.lat()) + ']';
}