Jeg har skrevet dit eksempel lidt om. Det kan godt gøres mere elegant, men nu har du noget at bygge videre på:
<!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: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="
http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
function getPos(elm) {
for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
return {x:zx,y:zy}
}
var coordX1 = "";
var coordX2 = "";
var coordY1 = "";
var coordY2 = "";
var oRect = null;
var bDragEnabeld = false;
function toggle() {
if (!oRect) oRect = document.getElementById("rect");
var css = document.getElementById('overlay').style;
var css2 = oRect.style;
if (css.display == 'block') {
css.display = 'none';
css2.display = 'none';
} else {
css.display = 'block';
}
}
function dragStart(event) {
if (!oRect) oRect = document.getElementById("rect");
var oPos = getPos(oRect.parentNode);
var css = oRect.style;
coordX1 = event.clientX-oPos.x;
coordY1 = event.clientY-oPos.y;
css.left = coordX1+"px";
css.top = coordY1+"px";
css.width = 0;
css.height = 0;
css.display = "block";
bDragEnabeld = true;
event.returnValue = false;
}
function dragMove(event) {
if (!bDragEnabeld) return;
var oPos = getPos(oRect.parentNode);
var x = event.clientX-oPos.x;
var y = event.clientY-oPos.y;
var css = oRect.style;
if (x<coordX1) {
css.width = (coordX1-x)+"px";
css.left = x+"px";
} else {
css.width = (x-coordX1)+"px";
css.left = coordX1+"px";
}
if (y<coordY1) {
css.height = (coordY1-y)+"px";
css.top = y+"px";
} else {
css.height = (y-coordY1)+"px";
css.top = coordY1+"px";
}
event.returnValue = false;
}
function dragEnd(e) {
e = e ? e : event;
var oPos = getPos(oRect.parentNode);
coordX2 = e.clientX-oPos.x;
coordY2 = e.clientY-oPos.y;
document.getElementById('res').innerHTML = "Drag start: "+coordX1+","+coordY1+"\n | Drag end: "+coordX2+","+coordY2;
bDragEnabeld = false;
}
document.onmouseup = dragEnd;
</script>
</head>
<body onload="initialize()">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
Mouse coordinates:
</td>
<td>
<div id="res">Drag start: 0,0 | Drag end: 0,0</div>
</td>
</tr>
<tr>
<td>
<div id="container" style="position:relative; width:640px; height:480px; z-index:100">
<div id="map_canvas" style="position:absolute;left:0;top:0;width:640px;height:480px;z-index:500;display:block;"></div>
<div id="overlay" style="position:absolute;left:0;top:0;width:640px;height:480px;z-index:1000;display:block;opacity:0.5;filter:alpha(opacity=50); background-image:url(bg.png);" onmousedown="dragStart(event);" onmousemove="dragMove(event);"></div>
<div id="rect" style="position:absolute;left:0;top:0;display:none;border:1px dashed red;z-index:999"></div>
</div>
</td>
<td>
<button type="button" onclick="toggle()">ToggleOverlay</button>
</td>
</tr>
</table>
</body>
</html>
