Why mouseover event not dispatching for polyline in google map?

Question

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 1

• demo: http://jsfiddle.net/kbngxku9/

 var map;

 function initialize() {

   var mapOptions = {
     center: new google.maps.LatLng(-3, 23),
     zoom: 5,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };

   map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);

   var bounds = [];
   var bounds_group_1 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)],
     bounds_group_2 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18)];
   bounds.push(bounds_group_1);
   bounds.push(bounds_group_2);

   for (var i = 0; i < bounds.length; i++) {
     addPolylineSegment(bounds[i]);
   }
 }

 function addPolylineSegment(bounds) {

   // optionally you can put each polyline
   // segment into an array to later use...

   var polyline;

   polyline = new google.maps.Polyline({
     path: bounds,
     strokeColor: "#0000FF",
     strokeOpacity: 0.5,
     strokeWeight: 6
   });

   polyline.setMap(map);

   // attach event listener to each segment...
   google.maps.event.addListener(polyline, 'mouseover', function(event) {
     this.setOptions({
       strokeOpacity: 1
     });
   });

   google.maps.event.addListener(polyline, 'mouseout', function(event) {
     this.setOptions({
       strokeOpacity: 0.5
     });
   });
 }
 google.maps.event.addDomListener(window, 'load', initialize);

Answer 2

OK, I'm trying to keep the solution close to your code. The key was changing both listener's this.line.setOptions to this.setOptions:

    google.maps.event.addListener(this.line, 'mouseover', function() {
        this.setOptions({
            strokeOpacity : 1
        });
    });

    google.maps.event.addListener(this.line, 'mouseout', function() {
        this.setOptions({
            strokeOpacity : 0.5
        });
    });

I've seen a similar case with markers in another question. I believe this inside the function() already refers to the first argument of addListener(), in this case, this.line, so you are covered just saying this. Here is the jsfiddle:

http://jsfiddle.net/zfFsD/

The other change I made was putting the links[] code in my initialize(). Wish you the best!