I've a plex 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 remend 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 : /

I've a plex 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 remend 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/wasimbhalli/9bg6x/

• javascript
• google-maps

• try this lab.gmtplusone./google-maps/polyline-click-issue – Ramesh Kotha Commented Mar 27, 2012 at 19:10
• 1 Can you post more code? Is polyline global or declared within the context of something else? – javram Commented Mar 27, 2012 at 19:11
• Do the polylines overlap? Is the expected behavior that when two polylines overlap, the listener should fire for both polylines? – javram Commented Mar 28, 2012 at 4:48
• lines are not overlapping. They are shown in a loop and I'm simply adding listener but that doesn't seem to work :( – wasimbhalli Commented Mar 28, 2012 at 6:57
• There may be a scope issue. What is this? – Andrew Leach Commented Apr 4, 2012 at 16:43

4 Answers 4

• demo: http://jsfiddle/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);

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

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

I think you have a scope problem.

change

this.line.setOptions

with

this.setOptions

Firebug and console.log() are your friends :)

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!

Cheers