Google maps rectangle/polygon with title

Question

How can I add title to google.maps.Rectangle and google.maps.Polygon? The title attribute is not available within RectangleOptions. I tried it and it doesn't work (it is possible for google.maps.Marker, so I guess it should be for rectangle and polygon too).

If there is no clean solution via google maps, woudln't it be possible to just get the DOM element of the rectangle and add title attribute with jQuery? So we might possibly reduce the question to "How to get the DOM element of google maps rectangle/polygon?"

Answer 1

You can mimic the "title" tooltip with InfoBox (download here). It's a bit convoluted, but by setting the right options you can make it look more like a browser tooltip than what I'm showing.

http://jsfiddle.net/vF7u2/

Answer 2

I found this online that helped me do tooltips on polygons, from http://philmap.000space.com/gmap-api/poly-hov.html:

var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 200;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
    show:function(v,w){         
        if(tt == null){             
            tt = document.createElement('div');
            tt.setAttribute('id',id);
            t = document.createElement('div');
            t.setAttribute('id',id + 'top');
            c = document.createElement('div');
            c.setAttribute('id',id + 'cont');
            b = document.createElement('div');
            b.setAttribute('id',id + 'bot');
            tt.appendChild(t);
            tt.appendChild(c);
            tt.appendChild(b);
            document.body.appendChild(tt);              
            tt.style.opacity = 0;
            tt.style.filter = 'alpha(opacity=0)';
            document.onmousemove = this.pos;                
        }
        tt.style.visibility = 'visible';
        tt.style.display = 'block';
        c.innerHTML = v;
        tt.style.width = w ? w + 'px' : 'auto';
        if(!w && ie){
            t.style.display = 'none';
            b.style.display = 'none';
            tt.style.width = tt.offsetWidth;
            t.style.display = 'block';
            b.style.display = 'block';
        }
        if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
        h = parseInt(tt.offsetHeight) + top;
        clearInterval(tt.timer);
        tt.timer = setInterval(function(){tooltip.fade(1)},timer);
    },
    pos:function(e){
        var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
        var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
        tt.style.top = (u - h) + 'px';
        tt.style.left = (l + left) + 'px';
    },
    fade:function(d){
        var a = alpha;
        if((a != endalpha && d == 1) || (a != 0 && d == -1)){
            var i = speed;
            if(endalpha - a < speed && d == 1){
                i = endalpha - a;
            }else if(alpha < speed && d == -1){
                i = a;
            }
            alpha = a + (i * d);
            tt.style.opacity = alpha * .01;
            tt.style.filter = 'alpha(opacity=' + alpha + ')';
        }else{
            clearInterval(tt.timer);
            if(d == -1){tt.style.display = 'none'}
        }
    },
    hide:function(){
        clearInterval(tt.timer);
        tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
    }
};
}();

Also, Please see this SO discussion about the same topic: Tooltip over a Polygon in Google Maps