Google maps rectangle / polygon with title

Question

How to add title to google.maps.Rectangle and google.maps.Polygon? The title attribute is not available in RectangleOptions . I tried and it doesn’t work (this is possible for google.maps.Marker, so I assume it should be for a rectangle and a polygon too).

If there is no clean solution using google maps, is it not possible to just get the DOM element from the rectangle and add the title attribute using jQuery? Thus, we could reduce the question to the question "How to get the DOM element from google maps rectangle / polygon?"

Answer 1

You can imitate the "title" tooltip using the InfoBox ( download here ). This is a bit confusing, but by setting the options you need, 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, which helped me make 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, see this discussion on the same topic: Polygon hint on Google Maps