Why is the mouseover event not dispatched for a polyline on a google map?

Question

I have a complex stream where I have to attach a mouseover event for each polyline on the map. The code for attaching an event is simple:

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

But the event is associated with several polylines, and not with others. What could be the reason?

Edit

Below is another code that precedes the code above and is used to determine the 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

Below is the code that creates the problem. Please explain why this is 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/9bg6x/23/

  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 links = []; var link2 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)], link1 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18)]; links.push(link1); links.push(link2); for (var i = 0; i < links.length; i++) { doJob(links[i]); } } function doJob(polyline_bounds) { var polyline; polyline = new google.maps.Polyline({ path: polyline_bounds, strokeColor: "#0000FF", strokeOpacity: 0.5, strokeWeight: 6 }); polyline.setMap(map); 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);​ 

---

little attention, I'll do it for links

 var links = []; var link2 = [ [-3.5999999999999996, 23.4], [-4.5, 23.4] ]; var = link1 = [ [-3.5999999999999996, 23.4], [-3.5999999999999996, 18] ]; links.push(link1); links.push(link2); for (var i = 0; i < links.length; i++) { var polyline_bounds = []; for (var j = 0; j < links[i].length; j++) { polyline_bounds.push(new google.maps.LatLng(links[i][j][0], links[i][j][1])); } doJob(polyline_bounds); } } 

or better by creating a json object and looping around on it unnecessarily

  links.push(link1); links.push(link2); 

Answer 2

OK, I'm trying to keep the solution close to your code. The key changed both listeners of 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 saw a similar case with markers in another question. I believe that this inside the () function already refers to the first argument to addListener (), in this case this.line , so you can just say this . Here is the jsfiddle:

http://jsfiddle.net/zfFsD/

Another change I made was to put the link code [] in my initialize (). I wish you the best!

Answer 3

I think you have a problem with the area.

change

 this.line.setOptions 

from

 this.setOptions 

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

Answer 4

I managed to get around this using the method described below. If I understand you correctly, the loop in which you attach the listener to the polyline is not really “attached” to the polyline this way, but instead you need a new instance of the class that contains the polyline and listeners. Thus, each polyline gets its own listener.

Please see the explanation below.

EDIT 5.4.2012

Here's also a rough demonstration of JSFiddle code in action. JSFiddle Demo Link

 function initialize() { // initialize Google Maps canvas normally var polylines = []; // Data set of the polylines you want to present on the map, // eg [ { 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!

Greetings