JavaScript dynamic variable naming

Question

I have function when executed will plot routes on a map from an array of values. I am using Google maps *Directions Render*. From research i have seen, to render multiple routes on a map i need to create a Directions Render for each route in the array.

I am trying to create a Directions Render for each route in the array so i have decided to concat the name of the of the variabe with the index 'i'. this does not work.

I created the Directions Render object as an array however when accessing the array to pot the points i am getting an error - TypeError: can't convert undefined to object directionsService[i] = new google.maps.DirectionsService();

If i create separate Directions Render e.g. DirectionsRender0,DirectionsRender1, DirectionsRender2... this works fine however there will be an instance where i am not sure how many Directions Render there will be.

Under is an example of my code:

function plotRoutes(){  

    var directionsDisplay = new Array();

    for (var i=0; i< startLoc.length; i++){

    var rendererOptions = {
        map: map,
        preserveViewport:true
    }
    directionsService[i] = new google.maps.DirectionsService();

    var travelMode = google.maps.DirectionsTravelMode.DRIVING;  

    var request = {
        origin: startLoc[i],
        destination: endLoc[i],
        travelMode: travelMode
    };  
        directionsDisplay[i] = new google.maps.DirectionsRenderer(rendererOptions);

        directionsDisplay[i].setMap(map);

        directionsService.route(request, function(response, status) {
        //console.log(response);

        if (status == google.maps.DirectionsStatus.OK){
            console.log(response);
            directionsDisplay[i].setDirections(response);

            }

        });
    }

Pointy · Accepted Answer · 2013-08-05 19:05:19Z

1

The problem is that all your callbacks share the same variable "i", and in each of them the value of "i" will be one past the number of points by the time the callbacks are called.

Create your callback in a separate function, like this:

  function makeRouteCallback(disp) {
    return function(response, status) {
      console.log(response);
      disp.setDirections(response);
    };
  }

Then set up the callbacks:

  directionsService.route(request, makeRouteCallback(directionsDisplay[i]));

That assures that the actual callback function used by the API will be the correct member of your array. The reference to "i" is evaluated at the time the callback is established, not when it's actually called. At that point, the callback function uses the stashed copy ("disp"), which will be private to each callback.

answered Aug 5, 2013 at 19:05

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

devdar Over a year ago

i am still getting the error TypeError: can't convert undefined to object [Break On This Error] directionsService[i] = new google.maps.DirectionsService();

Pointy Over a year ago

@dev_darin you forgot to declare "directionsService" perhaps? There's no declaration in the code you posted.

devdar Over a year ago

Oh sorry my mistake i had directionsService[i] instead of just directionsService no need to pace an index on directionsService. Thanks for your help and great answer.

Collectives™ on Stack Overflow

JavaScript dynamic variable naming

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related