Google Maps API Tutorial - Tooltips© 2006, 2007, 2009 Mike Williams |
Translate this page: |
Custom Tooltips - new methodThe API provides a method, map.fromDivPixelToLatLng(), which can be used to obtain unnormalized boundary information. This allows us to produce slightly better custom tooltips than the previous version.The advantages are that the tooltip contents don't get squashed when near the East edge of the viewport, and the positioning behaviour is correct when the viewport contains one copy of the International Date Line. Here's an example The code is more complicated than using standard tooltips, but by creating our own tooltips we can:
When the mouseover event occurs, the pixel position of the marker relative to the North West corner of the map dragObject is calculated, the tooltip <div> is positioned relative to that corner and made visible. There's no reason why the tooltip should only contain a simple text label. You can use images and tables etc. Don't try using links or forms, because the tooltip disappears when the mouse moves over the tooltip, because it would no longer be over the marker. Bugs
Potential Pitfalls
Up to the start of this tutorial |