google map, show tooltip on a circle

Question

I know I can make a marker with 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 doesn't 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
            });

It prints the circle but does not show the message "SOMETHING".

How can I do it? is there another property to get it?

Thanks in advance.

Answer 1

The tooltip is created via the native title-attribute of DOM-elements, but the API doesn't provide any method to access the DOMElement that contains the circle.

A possible workaround may be to use the title-attribute of the map-div instead(set it onmouseover and remove it 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 html title attribute, as the title may not show up always on mouse over. InfoWindow looks pretty good.

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

Then use same mouseover event mechanism to show the InfoWindow:

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

google.maps.event.addListener(circle, 'mouseout', function () {
 infowindow.close();
});

Answer 3

Also we can add event listener direct on google.maps.Circle instance.

Code sample:

//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 alternative!