Why mouseover event not dispatching for polyline in google map?

I've a complex flow where I've to attach mouseover event for every polyline on the map. The code for attaching the event is simple:

google.maps.event.addListener(polyline, "mouseover", function() {
             console.log('event fired');
 
         });
 

But the event is attaching to few polylines and not to others. What might be the reason?


Edit


Following is some more code that is before the above code and used for defining polyline:

    this.polyline = new google.maps.Polyline({
                 path : [fromPosition, toPosition],
                 strokeColor : '#CCCCCC',
                 strokeOpacity : 1.0,
                 strokeWeight : 2
             });
    var polyline = this.polyline;
 

Edit 05-Apr-2012


Following is the code that creates problem, Please explain why it's happening and recommend any solution. Thanks

function Link(from, to) {
         this.from = from;
         this.to = to;
     }
 
 
     Link.prototype.show = function() {
         this.line = new google.maps.Polyline({
             path : [this.from, this.to],
             strokeColor : "#0000FF",
             strokeOpacity : 0.5,
             strokeWeight : 6
         });
 
         this.line.setMap(map);
 
         google.maps.event.addListener(this.line, 'mouseover', function() {
             this.line.setOptions({
                 strokeOpacity : 1
             });
         });
 
         google.maps.event.addListener(this.line, 'mouseout', function() {
             this.line.setOptions({
                 strokeOpacity : 0.5
             });
         });
     }
     var links = [];
     var link2 = new Link(new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)), link1 = new Link(new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18));
     links.push(link1);
     links.push(link2);
 
     // I've a long list of links, so I'll prefer a loop
     for(var i = 0; i < links.length; i++) {
             links[i].show();
     }
 

JSFiddle Demo : http://jsfiddle.net/wasimbhalli/9bg6x/

---

Answer:

I managed to work around this using the method described below. If I understood you correctly, the loop in which you attach a listener to a polyline does not in fact get "attached" to the polyline that way, but instead, you need a new class instance that contains the polyline and the listeners. This way, each polyline gets it's own listener.

Please, see the explanation below.

EDIT 5.4.2012

Here's also a crude JSFiddle demonstration of the code in action. Link to JSFiddle demo

function initialize() {

    // initialize Google Maps canvas normally

    var polylines = [];

    // Data set of the polylines you want to present on the map, 
    // e.g. [ { lat:"...",lon:"..." }, ...]

    var polylineData = [{ ... }] 

    for ( i in polylineData ) {
         var line = new google.maps.Polyline({ 
             path: [/*coordinates as google.maps.LatLng objects*/] 
         });

         // Create a new myPolyLineClass instance that contains the polyline data
         // and push it to polylines array.

         polylines.push(new myPolyLineClass(line));
    }

    // Set all the polylines and their individual listeners on map

    for ( i in polylines) {
        polylines[i].line.setMap(map);
    }
}
function MyPolylineClass(lineData) {
    this.line = lineData;

    // + all other data you want the polylines to contain

    // Add listeners using google.maps.event.addListener to all class instances
    // when they are constructed.

    // for instance:

    google.maps.event.addListener(line, 'mouseover', function() {
            line.setOptions({ [options you want to set when area is hovered 
            and selected] });
    });

    // Add listeners also for when polyline is not hovered anymore, respectively,
    // and other methods you might want to call when polylines are being interacted with.
};

Hope this helps!