Question

34

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

rated 0 times [ 41] [ 7] / answers: 1 / hits: 30114 / 13 Years ago, sat, july 2, 2011, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckinleyi

Add To Favorites

Follow

Total Points: 121

Total Questions: 100

Total Answers: 109

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

answered 13 Years ago danae · Accepted Answer

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