javascript - Google maps rectanglepolygon with title - Stack Overflow

admin管理员组

文章数量:1394217

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?"

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?"

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Apr 12, 2012 at 12:33 Tomas asked Apr 11, 2012 at 8:30 TomasTomas 59.7k5454 gold badges250250 silver badges382382 bronze badges 1

• possible duplicate of Tooltip over a Polygon in Google Maps – SliverNinja - MSFT Commented Dec 10, 2012 at 2:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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/vF7u2/

I found this online that helped me do tooltips on polygons, from http://philmap.000space./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

本文标签： javascriptGoogle maps rectanglepolygon with titleStack Overflow