Take the 2-minute tour ×

I need to show some nice tooltip with image and text on mouse hover of google maps marker.
marker.setTitle - works only with text but not with html
Does google maps api have standard solution ?
Can you please suggest lib to create tooltips and make them look nice ?

share|improve this question

2 Answers 2

Here is what I did on a project if you want a DIY solution.

  1. Create a hidden div on your page with css position set to absolute. Make sure your DIV appears on top of your map container (z-index).
  2. Bind mouseover and mouseout events to your markers to trigger a showDiv / hideDiv function.
  3. When mouse hovers a marker, get the mouse x,y position, set the DIV top and left css values accordingly and set its css to display:block;
  4. When mouse is out, hide the DIV again.

This way you can really control how your "infowindow" appears and what it will contain. Good luck.

share|improve this answer
If you handle the mouseover event of the marker by using google.maps.event.addListener, all the event object contains is the lat and long, so you don't get the mouse's x,y positions. That renders this approach impossible to implement. –  Justin Aug 10 '13 at 14:48
I didn't say you get the mouse position from the marker listener. Get it from the DOM as you would do in any other script. –  MrUpsidown Aug 10 '13 at 22:04

You could listen for the mouseover event on the marker, and trigger an infoWindow to appear with that event.

Once you have the infowindow, you can put pictures and text in it in a way that is well supported by the api.

share|improve this answer
yes, but infoWindow is hard to customize. It has predefined design. InfoBox is proffered for me. –  Oleg Dats Mar 6 '12 at 11:51

protected by Community Feb 13 at 21:38


Would you like to answer one of these unanswered questions instead?
