Google maps v3 polyline tooltip

Question

A google maps marker object (google.maps.Marker) has a title property, so when a user moves their mouse over the marker a simple tooltip is displayed.

There isn\'t a tit

Answer 1

I am not 100% this is the only way, or the best way, but it is a way to create a window over your Polyline

In Google maps V3, you should to create an InfoWindow then set the content using myInfoWindow.setContent("Hello World!")

In order to make it show on mouseover, you will need to do something like:

google.maps.event.addListener(myPolyline, 'mouseover', function() {
    myInfoWindow.open(mymap);
    // mymap represents the map you created using google.maps.Map
});

// assuming you want the InfoWindow to close on mouseout
google.maps.event.addListener(myPolyline, 'mouseout', function() {
    myInfoWindow.close();
});

Answer 2

I combined @samshull's answer above (duly upvoted!) with info from here to make the InfoWindow appear where the user's cursor mouses over the line:

// Open the InfoWindow on mouseover:
google.maps.event.addListener(line, 'mouseover', function(e) {
   infoWindow.setPosition(e.latLng);
   infoWindow.setContent("You are at " + e.latLng);
   infoWindow.open(map);
});

// Close the InfoWindow on mouseout:
google.maps.event.addListener(line, 'mouseout', function() {
   infoWindow.close();
});

Here, line is your PolyLine object; map is your Map object; and infoWindow is your InfoWindow object, which I just create with:

var infoWindow = new google.maps.InfoWindow();

I also follow this advice by re-using the same InfoWindow object for all my polylines rather than creating a new one for each line:

Best practices: For the best user experience, only one info window should be open on the map at any one time. Multiple info windows make the map appear cluttered. If you only need one info window at a time, you can create just one InfoWindow object and open it at different locations or markers upon map events, such as user clicks. If you do need more than one info window, you can display multiple InfoWindow objects at the same time.

Note that infoWindow.setContent() takes a string. So call toString() on a number variable if you want to display a number in the InfoWindow.

I view all of this as an imperfect workaround until Google Maps hopefully one day add a title property to PolylineOptions, just like they've already done for MarkerOptions.

Answer 3

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 And, Google maps rectangle/polygon with title

Answer 4

If i'm not mistaken i don't think it is possible to set the tooltip since as you mentioned there is not a title property in PolygonOptions object.But you can make a div that looks exactly the same as the tooltip and place it let's say in the tip of your mouse during the mousemove event.I tried also to find a solution to place this tooltip somewhere in the center of the polygon but i think it is too much of a trouble that's why i also think the google guys didn't implement it also. Cheers