Question

I’m currently working on a project that requires that I have a div stacked above a Google Map. However, I need to pass the mousemove event of the div to the Map. To do that, I need to find the LatLng co-ordinates from the map container pixel co-ordinate (since triggering the Maps mousemove event requires the LatLng co-ordinates).

Is there any other way to pass the mousemove event from the div to the map, and if not, how do I go from the Map container co-ordinates to LatLng. I read that doing so requires creating a dummy overlay, and then using the getProjection() on that to get a MapCanvasProjection, and finally calling the fromContainerPixelToLatLng(). Is there any simpler way or do I really have to create a dummy overlay first?

Answer 1

As far as I can tell, this is the way you have to do it. I was reluctant at first, too, since it seemed like such overkill, but once I did it everything worked great. Here’s an example implementation with a convenient delayedInit() callback:

function Dummy(map) {
    this.setMap(map);
}
Dummy.prototype = new google.maps.OverlayView();
Dummy.prototype.draw = function() {
    if (!this.ready) { 
        this.ready = true; 
        google.maps.event.trigger(this, 'ready'); 
    } 
}
Dummy.prototype.onAdd = function(){
    // the Overlay dummy is ready and can be called upon
    delayedInit();
}
var dum;

… and after you’ve instantiated your Google map:

dum = new Dummy(map);