google maps v3 marker mouseover tooltip

Question

I want to put a tooltip made myself with divs when the mouse is over a marker, but I don't know how to get the screen position to put the div on the correct position, here is my code:

google.maps.event.addListener(marker, "mouseover", function() {
            divover.css("left", marker.get("left"));
            divover.css("top", marker.get("top"));
            divover.css("display", "block");
});

google.maps.event.addListener(marker, "mouseout", function() {
            divover.css("display", "none");
});

Obviously the get method fails. Any Idea?

Answer 1

This is a tricky one. In v2 of the API, you can do:

map.fromLatLngToContainerPixel(marker.getLatLng(), zoomLevel);

In v3, the method fromLatLngToContainerPixel has been moved to the MapCanvasProjection object. To get a MapCanvasProjection object, you need to call getProjection on an OverlayView object. It looks like the Marker class is extended from OverlayView, but unfortunately it doesn't have the getProjection method. I have no idea why - may be worth filing a bug.

The way I've done it is by creating my own custom marker class, based on OverlayView, so it still has the getProjection method:

var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);

You can read Google's tutorial on custom overlays or copy their example to get you started.

Answer 2

Somehow, none of the other answer worked for me or I didn't want to implement them (e.g. creating your own custom Marker class).

After some more searching I found this solution, though, that does exactly what's needed:

function latlngToPoint(map, latLng) {
    var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
    var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
    var scale = Math.pow(2, map.getZoom());
    var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
    var point = new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
    return point;
}

Then just call var position = latlngToPoint(map, marker.getPosition()); and use the position to your heart's content :-)

Answer 3

infowindow is designed to solve this problem. http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

Answer 4

Here is link to a tutorial I just created on how to create a tooltip for Google Maps API V3: http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript-api-v3/ To see it in action, go here http://medelbou.com/demos/google-maps-tooltip/

Answer 5

Found a solution in another post:

var point = gmap.getProjection().fromLatLngToPoint(marker.getPosition())

Answer 6

I was having trouble getting the projection to update after dragging the map using the method here or creating a dummy overlayview and using its projection. I found a solution that works 100% for me here: http://qfox.nl/notes/116

/**
* @param {google.maps.Map} map
* @param {google.maps.LatLng} latlng
* @param {int} z
* @return {google.maps.Point}
*/
var latlngToPoint = function(map, latlng, z){
    var normalizedPoint = map.getProjection().fromLatLngToPoint(latlng); // returns x,y normalized to 0~255
    var scale = Math.pow(2, z);
    var pixelCoordinate = new google.maps.Point(normalizedPoint.x * scale, normalizedPoint.y * scale);
    return pixelCoordinate; 
};
/**
* @param {google.maps.Map} map
* @param {google.maps.Point} point
* @param {int} z
* @return {google.maps.LatLng}
*/
var pointToLatlng = function(map, point, z){
    var scale = Math.pow(2, z);
    var normalizedPoint = new google.maps.Point(point.x / scale, point.y / scale);
    var latlng = map.getProjection().fromPointToLatLng(normalizedPoint);
    return latlng; 
};