javascript - drawing multiple lines in google-map -


i've drawn single polyline in google-map, when tried draw 2 line in single map failed...its not showing on google-map

can please tell me solution this

see - http://jsfiddle.net/wlebh/12/

my javascript 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){   (var = 0, l = routes.length; < 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);} } 

there issues not related question:

  1. you create new map-instance on each iteration
  2. you didn't set map-property of renderer
  3. you've set routeindex 1, 1 route(with index 0)

the issue related question: attempt good, implementation wasn't.
must create new directionsrenderer-instance each request(you've done it), instance visible in function-scope, variable overwritten on each iteration , when response arrives each response use same directionsrenderer-instance(which may render single route).

use anonymous function create directionsrenderer-instances , requests:

$.each(routes, function(i,obj){//<--anonymous function  var request = {         origin: obj.origin,         destination: obj.destination,         travelmode: google.maps.travelmode.driving       },      //directionsdisplay visible in scope of 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/


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -

php - Accessing static methods using newly created $obj or using class Name -