drawing multiple lines in google-map

Question

i've drawn a single polyline in google-map, but when tried to draw two line in single map it failed...its not showing anything on the google-map

can anyone please tell me some solution for this

SEE - http://jsfiddle.net/wLeBh/12/

My javascript is as given below

function initMap()
{
    alert("entered!!!");
var routes = [{origin:'p t usha road, kozhikode', 
               destination:'cooperative hospital, eranjipalam, kozhikode'
              }, 
              {origin:'IIM, Kozhikode',
               destination:'VELLIMADUKUNNU, KOZHIKODE'
              }
             ];    
   try{          
    var rendererOptions = {
    preserveViewport: true,         
    suppressMarkers:true,
    routeIndex:1
    };  

     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

//routes.each(function(route){


for (var i = 0, l = routes.length; i < l; i++) {
        var obj = routes[i];
alert(obj.origin);
    var request = {
        origin: obj.origin,
        destination: obj.destination,
        travelMode: google.maps.TravelMode.DRIVING
    };


 map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0,0),
zoom: 10,
maxZoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions:
{
   style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
 }
 });


    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    directionsDisplay.setMap(map);

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

        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    });


}

}catch(e){alert(e);}
}

Answer 1

There are some issues not related to the question:

1. you create a new Map-instance on each iteration
2. you didn't set the map-property of the Renderer
3. you've set the routeIndex to 1, but you get only 1 route(with the index 0)

The issue related to the question: The attempt was good, but the implementation wasn't.
You must create a new DirectionsRenderer-instance for each request(you've done it), but this instance is visible in the function-scope, so the variable will be overwritten on each iteration and when the response arrives each response will use the same DirectionsRenderer-instance(which may only render a single route).

Use a anonymous function to create the DirectionsRenderer-instances and requests:

$.each(routes,
function(i,obj){//<--anonymous function

var request = {
        origin: obj.origin,
        destination: obj.destination,
        travelMode: google.maps.TravelMode.DRIVING
      }, 
    //directionsDisplay is only visible in the scope of this anonymous function    
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);


    directionsService.route(request, function(result, status) {

      if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(result);
      }
    });  

});});

Fiddle: http://jsfiddle.net/doktormolle/wLeBh/14/