Get Position of Mouse Cursor on Mouseover of Googl

Question

I am trying to make a div visible at the position of the cursor when the cursor mouseover a marker using jQuery. Its kind of like a tooltip. However I cannot seem to figure out how to get the X/Y coordinates of the point below the cursor.

Current Code:

google.maps.event.addListener(marker, "mouseover", function(event) {

    $("#tooltip").css({
        position: "absolute",
        top: event.pageY,
        left: event.pageX
    }).toggle();

I believe event does not have the properties pageY and pageX like in the event in jQuery.

How do I get the osition of the mouse cursor?

Answer 1

The solution that works for me is more straight forward:

map.data.addListener('mouseover', function (event) {
    posX = event.ub.clientX;
    posY = event.ub.clientY;
});

Answer 2

Here's a solution that uses the MouseEvent of the click event but does not rely on accessing that via an undocumented property that can change at any time like 'ub' or 'wb' (I think it's 'ya' currently).

map.data.addListener('mouseover', function (e) {
    var keys = Object.keys(e);
    var x, y;
    for (var i = 0; i < keys.length; i++) {
        if (MouseEvent.prototype.isPrototypeOf(e[keys[i]])) {
            x = e[keys[i]].clientX;
            y = e[keys[i]].clientY;
        }
    }
});

Answer 3

Add the following code into the listener function:

// to display a tooltip:
marker.setTitle("Hi");

// to get the geographical position:
var pos = marker.getPosition();
var lat = pos.lat();
var lng = pos.lng();
// ...

Answer 4

This is an extension of my previous answer regarding the computation of the pixel positions (Google maps API v3). Introduce a "global" variable overlay:

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map); // 'map' is new google.maps.Map(...)

Use overlay in the listener to get the projection and the pixel coordinates:

google.maps.event.addListener(marker, 'mouseover', function() {
    var projection = overlay.getProjection(); 
    var pixel = projection.fromLatLngToContainerPixel(marker.getPosition());
    // use pixel.x, pixel.y ... (after some rounding)
}); 

You may also have a look at projection.fromLatLngToDivPixel().

Answer 5

mapObject.marker.addListener("mouseover", (event) => {
  //USE THE COORDINATES HERE = { lat: event.latLng.lat(), lng: event.latLng.lng();
}

Answer 6

This gives the mouse position, works for me.

function CanvasProjectionOverlay() { }

CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
CanvasProjectionOverlay.prototype.onAdd = function () { };
CanvasProjectionOverlay.prototype.draw = function () { };
CanvasProjectionOverlay.prototype.onRemove = function () { };

In your initialize function;

canvasProjectionOverlay = new CanvasProjectionOverlay();
canvasProjectionOverlay.setMap(map);

and use it like this;

google.maps.event.addListener(marker, 'mouseover', function(event) { 
   var divPixel = canvasProjectionOverlay.getProjection().fromLatLngToContainerPixel(event.latLng);
   x = divPixel.x;
   y = divPixel.y;
});