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

user_748014 0
Viewed 29539

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 position of the mouse cursor?

google-maps-api-3 google-maps jquery javascript
7 Answers
mapObject.marker.addListener("mouseover", (event) => {
  //USE THE COORDINATES HERE = { lat: event.latLng.lat(), lng: event.latLng.lng();
}
user_40856360

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,
});
user_93146320
Related