How to add custom tooltip for google map marker ?

Question

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 ?

Answer 1

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.

Answer 2

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.