Google map, show tooltip in a circle

Question

I know I can make a tooltip that shows “SOMETHING” like this:

marker = new google.maps.Marker({ position: new google.maps.LatLng(lat,lon), map: map, draggable: true, title:"SOMETHING", icon: '/public/markers-map/male-2.png' }); 

I want to do the same with a circle, but title does not work.

 new google.maps.Circle({ center: new google.maps.LatLng(lat,lon), radius: 20, strokeColor: "blue", strokeOpacity: 1, title:"SOMETHING", strokeWeight: 1, fillColor: "blue", fillOpacity: 1, map: map }); 

He prints a circle, but does not show the message "SOMETHING".

How can i do this? is there any other property to get it?

Thanks in advance.

Answer 1

The tooltip is created through the native title attribute of the DOM elements, but its API does not provide any way to access the DOMElement that contains the circle.

A possible workaround could be to use the title attribute for the map-div instead of it (set it to onmouseover and remove it from onmouseout )

  //circle is the google.maps.Circle-instance google.maps.event.addListener(circle,'mouseover',function(){ this.getMap().getDiv().setAttribute('title',this.get('title'));}); google.maps.event.addListener(circle,'mouseout',function(){ this.getMap().getDiv().removeAttribute('title');}); 

Answer 2

You can also use InfoWindow instead of the html title attribute, as the title may not always appear on hover. InfoWindow looks pretty good.

 var infowindow = new google.maps.InfoWindow({}); var marker = new google.maps.Marker({ map: map }); 

Then use the same mouseover event mechanism to show InfoWindow:

 google.maps.event.addListener(circle, 'mouseover', function () { if (typeof this.title !== "undefined") { marker.setPosition(this.getCenter()); // get circle center infowindow.setContent("<b>" + this.title + "</b>"); // set content infowindow.open(map, marker); // open at marker location marker.setVisible(false); // hide the marker } }); google.maps.event.addListener(circle, 'mouseout', function () { infowindow.close(); }); 

Answer 3

We can also add an event listener directly to the google.maps.Circle instance.

Code example:

 //circle is the google.maps.Circle-instance circle.addListener('mouseover',function(){ this.getMap().getDiv().setAttribute('title',this.get('title')); }); circle.addListener('mouseout',function(){ this.getMap().getDiv().removeAttribute('title'); }); 

Just wrote for an alternative!