google map, show tooltip on a circle

google-maps, google-maps-api-3, tooltip

Solution

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');});

Problem

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.

Original source