DrawingManager w/o complete events
Not working fine with mousemove on the map and the rect.
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(drawingManager, 'rectanglecomplete', function(subject) {
if (rect) {
G.event.clearInstanceListeners(rect);
rect.setMap(null);
}
rect = subject;
G.event.addListener(rect, 'bounds_changed', shapeChanged);
G.event.addListener(rect, 'mousemove', function(event) {
$('#lblCurrentPos').html(getLocationText(event.latLng));
console.log("mouse")
});
shapeChanged();
});
$('#txtShape').autoGrowInput();
}
function trunc(x) {
return Math.round(x * 1000) / 1000;
}
function getLocationText(location) {
return '[' + trunc(location.lng()) + ',' + trunc(location.lat()) + ']';
}