3

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'
        }
    });

  });
}
Nicolas Kaiser
  • 1,628
  • 2
  • 14
  • 26
lito
  • 3,105
  • 11
  • 43
  • 71
  • What do you mean by tooltip? Like a small tag that appears after a delay when you hover over it? Or like the actual pop up that occurs when you're clicking on an icon? – tkone Feb 11 '12 at 18:40
  • if you hovers any market you will see a yellow window, that is what I meant about tooltip – lito Feb 11 '12 at 19:03
  • Where do you want it? Directly over the google pop up? Why? If you want to cover the popup, why not take it off the map and make a custom overlay. Or do you want to position it nearby the pop up? – tkone Feb 11 '12 at 19:12
  • Hi thanks! I want to position nearby the marker. The problem is that my layout is liquid and the map could be at "any" position, therefore depending on the map position the if I use X,Y is useless. Thanks! – lito Feb 11 '12 at 22:09
  • Look at Heera's comment. The biggest issue you're going to face now is that if your item you want to present your tooltip for is near the extreme of the viewport, you'll need to make the map move the item into focus enough to display the tooltip. You can do this by using `map.panToBounds` and giving it the bounds of the marker + the tooltip as it's new bounds. Before you do this though, double check to make sure the bounds are within the viewport to save yourself the unnecessary call – tkone Feb 12 '12 at 04:41
  • I unsuccessfully implemented MBO's code from http://stackoverflow.com/questions/2674392/how-to-access-google-maps-api-v3-markers-div-and-its-pixel-position, but it does not return marker location and also X contains -180 offset, any idea how to get Market location? – lito Feb 13 '12 at 14:06

3 Answers3

5

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

lito
  • 3,105
  • 11
  • 43
  • 71
1

I've updated it and working, removed at: "right center", my: "left center", hope you want that http://jsfiddle.net/8X6cY/2/

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

var proj = overlay.getProjection();
var pos = marker.getPosition();
var p = proj.fromLatLngToContainerPixel(pos);

Now access your pixel coordinates through p.x and p.y. Found on SO. Hope it will help you.

The Alpha
  • 143,660
  • 29
  • 287
  • 307
  • Thanks! but that is not what I'm looking for. I want to positioning the yellow popup nearby the marker. The problem is that my layout is liquid and the MAP could be at "any" position, therefore depending on the map position the X,Y approach is useless; for instance: take the body padding and change it for 500px, then you solution is worthless. Thanks – lito Feb 11 '12 at 22:13
  • BTW it is worthless because the popup is going to be far on the top, while the MAP will be far down, Thanks – lito Feb 11 '12 at 22:20
  • 1
    Take a look at this http://stackoverflow.com/questions/2674392/how-to-access-google-maps-api-v3-markers-div-and-its-pixel-position – The Alpha Feb 11 '12 at 22:29
  • I unsuccessfully implemented MBO code from http://stackoverflow.com/questions/2674392/how-to-access-google-maps-api-v3-markers-div-and-its-pixel-position, it does not return marker location and also X contains -180 offset, any idea how to get Market location? – lito Feb 13 '12 at 14:05
0

If someone is looking for a solution on React using the OverlayView component from @react-google-maps/api.

There is a props on the component which gives us the offset width / height. If you have a custom marker for example you can use like that:

<OverlayViewF
    ...your_props
    getPixelPositionOffset={GetPixelPositionOffset}
>
  <your_components>
</OverlayViewF>

And the method

const GetPixelPositionOffset = (width: number, height: number) => {
  return {
    x: -(width / 2),
    y: -(height / 2)
  };
};

Can be used as a helper function that return the accurate position on x and y for the map markers based on the center point (basically can be named as a translation for the marker based on width / height)

Found that in documentation: https://react-google-maps-api-docs.netlify.app/#overlayview

Hope it helps !

Alex Iancu
  • 1