Get Position of Mouse Cursor on Mouseover of Google Maps V3 API Marker

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 cann开发者_如何学运维ot 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 position of the mouse cursor?

---

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().

---

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;
        }
    }
});

---

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

---

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();
// ...

---

The solution that works for me is more straight forward:

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

---

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;
}); 

---

When you hover over a marker event.domEvent.clientX and event.domEvent.clientY gives you the position on the DOM of where you clicked on the marker. If you subtract the offset, It will give you the center point in pixels of the marker itself.

This will give you the exact center point of your marker.

marker.addListener("mouseover", (event) => {
    const x = event.domEvent.clientX - event.domEvent.offsetX,
    const y = event.domEvent.clientY - event.domEvent.offsetY,
});