google maps v3 marker mouseover tooltip

Question

Hello, 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

Hi, that's what I am looking for, but can you put a little bit more code, I want to know how did you create the tool tip? Using the same tooltip that comes with GMarker, or it is a differente library. Thank you

Answer 3

Found a solution in another post:

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