google maps api v3 directions_changed event inside

Question

I have a route that is a combination of multiple sub routes. (By sub routes i mean multiple DirectionsRenderer objects)

I also have a loop where i go throught all of the DirectionsRenderer objects and attach "directions_changed" event to all of them.

Unfortunatelly only that last DirectionsRenderer object fires the event when i try to test what happens when i drag the polyline.

Here is a part of my code:

for(var k=0; k<directionsRenderers.length; k++)
{

     var directionsRenderer = directionsRenderers[k];
     var a = registerDirectionsChangedEvent(k,directionsRenderer);  
}


function registerDirectionsChangedEvent(index, directionsRenderer)
{
    this.index = index;
    this.directionsRenderer = directionsRenderer;

    var that = this;
    var a = google.maps.event.addListener(this.directionsRenderer, "directions_changed", function()
    {
       var newStopPoint;
       var directionsResult = that.directionsRenderer.getDirections();
       var route = directionsResult.routes[0];
       var legs = route.legs;
       var legsIndex = 0;

       for(var i=0; i<legs.length; i++)
       {
          var cLeg = legs[i];
          var viaWaypoints = cLeg.via_waypoints;
          if(viaWaypoints.length > 0)
          {
             newStopPoint = viaWaypoints[0];
             if(that.index === 1) legsIndex += 9;
             else if(that.index === 2) legsIndex += 18;

             break;
          }
          legsIndex++;
      }

      addNewStopPoint(newStopPoint,legsIndex);
   });

    return a;
}

As i have mentioned above not only the last DirectionsRenderer object get fired but the ones before the last event do not implement the default behaviour.

Maybe you have noticed that i use:

this.index = index;
this.directionsRenderer = directionsRenderer;

var that = this;

event without it it still does not work.

I also tried to use a function created inside the loop like this:

(function someFunction(a,b){//do something here})(a,b);

but still no luck!

any advice how to make it works?

Answer 1

Use function closure, this is probably a duplicate (not tested):

for(var k=0; k<directionsRenderers.length; k++)
{
     var directionsRenderer = directionsRenderers[k];
     var a = registerDirectionsChangedEvent(k,directionsRenderer);  
}


function registerDirectionsChangedEvent(index, directionsRenderer)
{
    var a = google.maps.event.addListener(directionsRenderer, "directions_changed", function()
    {
       var newStopPoint;
       var directionsResult = directionsRenderer.getDirections();
       var route = directionsResult.routes[0];
       var legs = route.legs;
       var legsIndex = 0;

       for(var i=0; i<legs.length; i++)
       {
          var cLeg = legs[i];
          var viaWaypoints = cLeg.via_waypoints;
          if(viaWaypoints.length > 0)
          {
             newStopPoint = viaWaypoints[0];
             if(index === 1) legsIndex += 9;
             else if(index === 2) legsIndex += 18;

             break;
          }
          legsIndex++;
      }

      addNewStopPoint(newStopPoint,legsIndex);
   });

    return a;
}