Question

I want to:

• Draw rectangles on a google map
• Have at most on rectangle
• Display the current location of the mouse when it moves

So, I came up with this code – http://jsfiddle.net/mark69_fnd/vBwf6/4/
I subscribe to the rectanglecomplete event of the DrawingManager instance in order to dispose of the previous rectangle, save the reference to the new one and subscribe to the mousemove event on the rectangle.

The problem, is that the mousemove event is never triggered.

What am I doing wrong and how to fix it?

Thanks.

Answer 1

Here is a function, which gives GPS coordinates by pixel offset related to top-left corner of map’s container.

function getLatLngByOffset( map, offsetX, offsetY ){
    var currentBounds = map.getBounds();
    var topLeftLatLng = new google.maps.LatLng( currentBounds.getNorthEast().lat(),
                                                currentBounds.getSouthWest().lng());
    var point = map.getProjection().fromLatLngToPoint( topLeftLatLng );
    point.x += offsetX / ( 1<<map.getZoom() );
    point.y += offsetY / ( 1<<map.getZoom() );
    return map.getProjection().fromPointToLatLng( point );
}

Add 'onmousemove' event listener on map’s div element, then pass mouse position related to div’s top-left corner.

UPDATE: DEMO (Tested on Chrome)