title: How to write callback function for DirectionsService
body: <p>I am using google API v3 to draw routes. I have to plot many routes on the map using a loop, the problem is that since the function call is asynchronous some routes are not plotted. When I put an 'alert' in the function it works. So in order to solve this I wrote a 'callback' function but it dose not works, any idea how to correct it ?</p>
  
  <pre><code>function plotRoute() 
   {        
      var count  = jsonObject[i].length-1;
      var count1 = jsonObject[i].length;
      var route_slipt = count1/7;
  
      color = "#"+((1&lt;&lt;24)*Math.random()|0).toString(16);
      var start_latlng = new google.maps.LatLng(start,end);
      var end_latlng   = new google.maps.LatLng(jsonObject[i][count].lat,jsonObject[i][count].lng);
      var travelWaypoints = [];
  
  for(var j in jsonObject[i]) {
  
      travelWaypoints.push({location: new google.maps.LatLng(jsonObject[i][j].lat,jsonObject[i][j].lng),stopover:false});
          }
                          //alert(travelWaypoints);
          var request = {
                   origin      : start_latlng, 
                   destination : end_latlng,
                   waypoints   :travelWaypoints,
                       travelMode  : google.maps.DirectionsTravelMode.DRIVING
                           };
  
                          putRoute(request,color);
          }
      }
  
  
  
  
  function putRoute(request,color,callback)
  {
  
              //alert('Route Plotted');
              //setTimeout(function() {alert('hello');},1250);
              var color   = color;
              var request = request;
              directionsService.route(request, function(response, status) {
  
                       if (status == google.maps.DirectionsStatus.OK) 
                       {
  
  
                           var polylineOptionsActual = {
                                                        strokeColor  :color,
                                                        strokeOpacity: 1.0,
                                                        strokeWeight : 5,
  
                                                        };
  
  
  
                           var directionsRenderer = new google.maps.DirectionsRenderer;
                                directionsRenderer.setMap(map);
                                directionsRenderer.setOptions( { polylineOptions: polylineOptionsActual, suppressMarkers: true} );
                                directionsRenderer.setDirections(response);
  
                              // directionsDisplay.setDirections(response);
                              if (typeof callback === "function") {
                                                           callback(request);
                              }
                      }
                      else
                      {
                          alert("Directions request failed:" + status); 
                      }
  
  
                   });
  
  
  }
  
  putRoute(request,function() {
      //alert('Finished eating my sandwich.');
  });
  </code></pre>