Google Maps API V3 - How to draw multiple snap-to-road polylines? -

edit

i found solution , service function being asynchronous when came drawing polyline there nothing there! idea popped head after reading this.

i fixed issue re-factoring code buildpath called recursively , addpolyline part of callback too.

---

i trying draw multiple polylines onto map snapped nearest road. cannot find solution. believe may not waiting directions service return route?

i have 2d array contains coordinates each road drawn. each column holds coordinates represents road , top row of array contains colour code. have @ moment:

        // draw roads.         var pathlines = new array();         for(var i=0; i<roads.length; i++) {             var pathline = {                     color: roads[i][0],                     coords: [],                     road: roads[i]             };             pathlines.push(pathline);         }  // each pathline object holds data each road drawn.          for(var i=0; i<pathlines.length;i++){             getdirectionspath(pathlines[i]);         } 

the second for loop passes pathline objects getdirectionspath. use directions service snap coordinates nearest road , use these new coordinates draw polyline. buildpath takes pair of coordinates , finds route between them. concatenated array contains route path. have tested using alert after getdirectionspath loop has completed. should print new coordinates, blank not storing correctly.

i believe problem lies in buildpath function , more way using directionsservice.

    function getdirectionspath(pathline) {     for(var i=1; i<pathline.road.length-1; i++) {         buildpath(pathline, i);     }     //alert(pathline.coords);  // alert here prints nothing - coords not stored?     addpolyline(pathline); }  function buildpath(pathline, x) {     var service = new google.maps.directionsservice();     service.route({         origin: pathline.road[x],         destination: pathline.road[x+1],         travelmode: google.maps.directionstravelmode.driving },          function(result, status) {             if(status == google.maps.directionsstatus.ok) {                 pathline.coords = pathline.coords.concat(result.routes[0].overview_path);             }         });  }  function addpolyline(pathline) {     var polyline = new google.maps.polyline({         path: pathline.coords,         strokecolor: pathline.color,         strokeopacity: 0.5,         strokeweight: 2,         map: map,         visible: true       }); } 

here map: maps.html

the polylines meant drawn along houses once click. coordinates should draw lines on lincoln's inn fields , chancery ln.

javascript source: maps.js