CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Oleg Dats
Oleg Dats

Reputation: 4133

How to add custom tooltip for google map marker ?

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 ?

Upvotes: 11

Views: 21264

Answers (3)

Asim Mittal
Asim Mittal

Reputation: 101

Oleg, why are you you bound to the google maps api. You can inject a custom tooltip into the DOM.

Attach event listeners for mouseover, mousemove and mouseout listeners on the map (or specific parts of the map). Each of those listeners also gives you an argument giving you the mouse coordinates.

Use a fixed/absolute style on the tooltip's css for positioning it

on mouseover, inject the tooltip at the cursor position into the DOM on mousemove, update the position (left and top) on mouseout, remove the tooltip from the DOM.

I've recently built this for google maps polygons. You can repurpose my approach for any other part of your map since almost every feature on the google map supports events.

link: https://medium.com/@asimmittal/custom-tooltips-for-google-maps-in-pure-javascript-a8004b8e9458

Upvotes: 0

MrUpsidown
MrUpsidown

Reputation: 22490

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.

Upvotes: 4

Oliver
Oliver

Reputation: 11597

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.

Upvotes: 3

Related Questions