20

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?

skaffman
  • 398,947
  • 96
  • 818
  • 769
Santiago
  • 2,190
  • 10
  • 30
  • 59

7 Answers7

18

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.

dave1010
  • 15,135
  • 7
  • 67
  • 64
  • Thanks, finally I did that, but something that I could resolve on 2 lines of code, was extremely complex and it took me serveral hours – Santiago May 03 '10 at 21:51
  • 2
    It should be a lot easier, so I submitted this bug: http://code.google.com/p/gmaps-api-issues/issues/detail?id=2342 When (if) it's fixed, `var point = marker.getProjection().fromLatLngToDivPixel(marker.getPosition());` should work. – dave1010 May 04 '10 at 07:22
10

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/

mohamed elbou
  • 1,829
  • 1
  • 18
  • 21
  • 2
    Welcome to Stack Overflow! Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – oers Feb 03 '12 at 07:13
  • Especially as the demo now 404s. :) – Chris Rae Apr 22 '21 at 20:07
5

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

chown
  • 51,908
  • 16
  • 134
  • 170
Steven Benjamin
  • 51
  • 1
  • 1
  • This is far the most practical solution. I mean, if you don't wanna code your own popup-info. –  Oct 24 '13 at 18:03
4

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 :-)

Community
  • 1
  • 1
Oliver
  • 9,239
  • 9
  • 69
  • 100
  • oops. spoke to soon. it works in some cases and not in others. kinda baffled by the variability. – elrobis Oct 16 '14 at 17:00
  • @elrobis: Are you saying you're having a problem with the code in my answer? Do you get any errors in the Javascript console of your browser? What's the broken behavior? – Oliver Oct 17 '14 at 12:15
  • ahh hey man. no got it working later but I'd already closed this page. I did something stupid like assigning the `.x` value to both the `x` and `y` positions. And since I had a test map centered on a point (so `x` and `y` were nearly the same), it seemed to be working, but the points around it behaved wacky. So at first it seemed to work--the comment I deleted--then I checked the other points and thought I spoke too soon. Then later when I was going mad, I realized I'd reused one of the values. ::head slap:: smh.. :/ – elrobis Oct 17 '14 at 14:14
  • Thanks, a lot better than the chosen answer – singe3 Mar 31 '15 at 14:26
1

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; 
};
CapnChaos
  • 101
  • 1
  • 4
  • Not exactly sure why, but this solution didn't work for me, the coordinates were still off. I found, however, this solution: http://a32.me/2012/03/position-custom-and-fancy-overlay-dialog-on-google-maps-v3/ - and that worked perfectly! – Oliver Apr 24 '13 at 21:17
0

Found a solution in another post:

var point = gmap.getProjection().fromLatLngToPoint(marker.getPosition())
Community
  • 1
  • 1
Jasper
  • 9
  • 1
  • 2
    this does not give the screen pixel relative to the upper-left corner. Instead it gives the world co-ordinate. – Nazmul Apr 28 '11 at 02:32
0

If you are using MarkerWithLabel to render markers, you could easily use its label property to display extra data when mousing over

  google.maps.event.addListener(marker, 'mouseover', function (ev) {
    this.labelContentOld = this.labelContent
    this.set("labelContent", this.id + ' ' + this.labelContent)
  })
  google.maps.event.addListener(marker, 'mouseout', function (ev) {
    this.set("labelContent", this.labelContentOld)
  })
angelito
  • 412
  • 4
  • 10