Question

I’m using google maps API 3 and a custom overlay (OverlayView)
I have this code:

http://jsfiddle.net/8X6cY/1/

please hover the maker with the mouse in order to see the tooltip overlay.

How can I precisely position the tooltip-popup (yellow window) nearby the marker?. My X,Y idea is not working because it is related to the map, therefore if the page’s layout is liquid my solution (X,Y) is worthless.

Any idea please?

  google.maps.event.addListener(marker, 'mouseover', function(event) {

    var pixel = latLngToPixel.getProjection().fromLatLngToContainerPixel(event.latLng);

    // Grab marker position
    var pos = [ pixel.x, pixel.y ];

    // Create the tooltip on a dummy div and store it on the marker
    marker.tooltip = $('<div />').qtip({
        content: {
            text: 'I\'m a replacement tooltip for the regular google one<br />New line<br /> new line<br />Newer line',
            title: {
                text: 'aaa',
                button: true
            }
        },
        position: {
            at: "right center",
            my: "left center",
            target: pos,
            container: $('#map_canvas')
        },
        show: {
            ready: true,
            event: false,
            solo: true
        },
        hide: {
            event: 'mouseleave unfocus'
        }
    });

  });
}

Answer 1

Just in case someone is looking for an answer, I came up doing this:

// getting marker x,y offset from left-top map
var pixel = latLngToPixel.getProjection().fromLatLngToContainerPixel(event.latLng);
// then get the map_canvas offset with jquery
var left = $('#map_canvas').offset().left;
var top = $('#map_canvas').offset().top;
// x,y position tooltip
var pos = [ pixel.x + left, pixel.y + top];

I hope it helps someone, it took me fair amount of time