title: Extend polyline and handle mouse event
body: <p>I write JS app where I draw a lot of polylines using array of points, but in avery point I have some additional properties in this point (GPS data, speed etc).</p>
  
  <p>I want to show these additional props onmouseover or onmouseclick event.</p>
  
  <p>I have two ways:</p>
  
  <ol>
  <li><p>use the standard polylines and event handler. But in this case I can't to determine additional properties for start point of this polyline cause I can't to save these props in polyline properties. There is one solution - save in array additional properties and try to find them by LatLng of first point of the polyline, but it's too slow I guess..</p></li>
  <li><p>extend polyline and save additional properties in new Object, but I can't to extend mouse events :( </p></li>
  </ol>
  
  <p>To extend polyline I use this code:</p>
  
  <pre><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;
  } 
  </code></pre>
  
  <p>and create new object in for loop (i - index of current point in array of points) like that:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>Where:</p>
  
  <ul>
  <li>line_points - array of points (just two points), </li>
  <li>i - current point index</li>
  <li>devices_properties[device_id].tracks - array of extended polylines (with add properties) by my device_id index</li>
  </ul>
  
  <p>After that I set event handler like that:</p>
  
  <pre><code>var tmp = devices_properties[device_id].tracks[(i-1)];
  google.maps.event.addListener(tmp.Polyline, 'click', function(e) {
  ...
  console.log(tmp.prop.id);
  ...
  }
  </code></pre>
  
  <p>But in this case I always get the same id in console.. </p>
  
  <p>When I use </p>
  
  <pre><code>google.maps.event.addListener(devices_properties[device_id].tracks[(i-1)].Polyline, 'click', function(e) {
  ...
  console.log(???); // How to get parent of polyline fired the event?
  ...
  }
  </code></pre>
  
  <p>I don't know how to get parent of polyline fired the event?</p>