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 title property on a polyline (google.maps.Polyline). Is there a way I can do this / simulate this in V3? I could do this in V2, and I can't find an example for V3.

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.