StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to achieve the Yelp Map Marker/Tooltip Effect in Google Maps?
text
Body
copied!<p>Ok so here's the deal,</p> <p>I'm trying to display a tooltip (instead of the ginfowindow) over some Yelp Map Markers that I am pulling onto a Google Map. </p> <p>I would like to have the exact same effects as Yelp. i.e. The tooltip seems to be set such that it's z-index is always above all other elements nearby, it moves the tooltip once it appears it is getting too close to the top of the page/bottom of the page, etc...</p> <p>So far I have been able to get the z-index of the tooltip to appear correctly by appending the tooltip to the body (as opposed to the map). I thought I was on the right track but then I checked the implementation on a larger monitor and realized that the solution I had come up with was pushing the tooltips out too far right. See the code below:</p> <pre><code> GEvent.addListener(marker,'mouseover',function(){ showMessage(this, infoWindowHtml); }); GEvent.addListener(marker,'mouseout',function(){ $("#tooltip").hide(); }); /* * Displays a Tooltip for the currently hovered marker */ function showMessage (marker, text) { var markerOffset = ymap.fromLatLngToContainerPixel(marker.getPoint()); theight = 20; twidth = 175; var twidth2 = $(".maincontent").width() + 12; $("#tooltip") .fadeIn() .html("<div class='content'>"+text+"</div>") .css({ top: markerOffset.y - theight, left: markerOffset.x + twidth2 - twidth/2 }) .appendTo("body"); } </code></pre> <p>Based on this code, does anyone see what I may be doing wrong with this tooltip implementation?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload