google maps api 3 - Extend polyline and handle mouse event -

i write js app draw lot of polylines using array of points, in avery point have additional properties in point (gps data, speed etc).

i want show these additional props onmouseover or onmouseclick event.

i have 2 ways:

1. use standard polylines , event handler. in case can't determine additional properties start point of polyline cause can't save these props in polyline properties. there 1 solution - save in array additional properties , try find them latlng of first point of polyline, it's slow guess..

2. extend polyline , save additional properties in new object, can't extend mouse events :(

to extend polyline use code:

function mypolyline(prop, opts){     this.prop = prop;     this.polyline = new google.maps.polyline(opts); }  mypolyline.prototype.setmap = function(map) {     return this.polyline.setmap(map); }  mypolyline.prototype.getpath = function() {     return this.polyline.getpath(); }  mypolyline.prototype.addlistener= function(prop) {     return this.polyline.addlistener(); }   mypolyline.prototype.getprop= function() {     return this.prop; }  mypolyline.prototype.setprop= function(prop) {     return this.prop = prop; }  

and create new object in loop (i - index of current point in array of points) that:

var polyline_opts   = {     path: line_points,     strokecolor: color,     geodesic: true,     strokeopacity: 0.5,     strokeweight: 4,     icons: [         {         icon:   linesymbol,         offset: '25px',         repeat: '50px'         }     ],                   map: map };  var add_prop    = {     id:  i,     device_id: device_id };  ...   devices_properties[device_id].tracks[(i-1)] = new mypolyline(add_prop, polyline_opts); 

where:

• line_points - array of points (just 2 points),
• i - current point index
• devices_properties[device_id].tracks - array of extended polylines (with add properties) device_id index

after set event handler that:

var tmp = devices_properties[device_id].tracks[(i-1)]; google.maps.event.addlistener(tmp.polyline, 'click', function(e) { ... console.log(tmp.prop.id); ... } 

but in case same id in console..

when use

google.maps.event.addlistener(devices_properties[device_id].tracks[(i-1)].polyline, 'click', function(e) { ... console.log(???); // how parent of polyline fired event? ... } 

i don't know how parent of polyline fired event?

i answer own question - it's done, i've have troubles using "for" instead "$.each" :)

before use:

for ( = 1; < devices_properties[device_id].history_points.length; i++ ) {     ...     create mypolyline     ... } 

and it's doesn't work - created 1 event handle.

after:

$.each(devices_properties[device_id].history_points, function(i, tmp){     ...     create mypolyline ()     ... } 

and works - create lot of event handlers.

to handle event use this:

google.maps.event.addlistener(c_polyline.polyline, 'mouseover', function(e) {     var prop = c_polyline.getprop();     ...     console.log(prop.id, prop.device_id); }