javascript - google map direction with multiple directions with colors -

i need populate following data on map direction

dataset 1     [         [lat, lon],         [lat, lon],         [lat, lon],     ], dataset 2     [         [lat, lon],         [lat, lon],         [lat, lon],     ],    on ...  

all data sets should have route unique color data set can exceed 8 waypoints limit. able fix 8 way points limit following online tutorials https://lemonharpy.wordpress.com/2011/12/15/working-around-8-waypoint-limit-in-google-maps-directions-api/ , plotting more 8 waypoints in google maps v3.

but found no way different colored route each datasets.

this code

<style> #map {        height: 1080px;        width: 100%;        border: 1px solid #000;        }  </style>  <div id="map"></div> <script> function initmap() {     //console.log("sdsfsd");     map = new google.maps.map(document.getelementbyid('map'), {       zoom: 14,       center: {lat: 28.6247, lng: 77.3731},       disabledefaultui:true,       //28.6247375!4d77.3731819     });      var directionsservice = new google.maps.directionsservice;     var directionsdisplay = new google.maps.directionsrenderer({suppressinfowindows: true, suppressmarkers: true      });       var response = {"abcd": {"points":     [         [28.5435,77.2051,"2016-07-17 08:02:18 - 28.543500 - 77.205100"],         [28.5313,77.249,"2016-07-17 12:32:38 - 28.531300 - 77.249000"],         [28.5279,77.2462,"2016-07-17 12:35:02 - 28.527900 - 77.246200"],         [28.5328,77.2391,"2016-07-17 12:36:42 - 28.532800 - 77.239100"],         [28.5407,77.24,"2016-07-17 12:38:23 - 28.540700 - 77.240000"],         [28.543,77.2139,"2016-07-17 12:42:36 - 28.543000 - 77.213900"],         [28.5429,77.2095,"2016-07-17 12:43:26 - 28.542900 - 77.209500"],         [28.5332,77.2071,"2016-07-17 12:48:30 - 28.533200 - 77.207100"],         [28.531,77.2113,"2016-07-17 12:52:43 - 28.531000 - 77.211300"],         [28.5315,77.2077,"2016-07-17 13:03:15 - 28.531500 - 77.207700"],         [28.5433,77.2117,"2016-07-17 13:08:27 - 28.543300 - 77.211700"],         [28.5412,77.2374,"2016-07-17 13:12:50 - 28.541200 - 77.237400"],         [28.5311,77.2482,"2016-07-17 17:49:02 - 28.531100 - 77.248200"]     ]},     "ret-abcd": {"points":[     [28.5294,77.2502,"2016-07-18 07:29:38 - 28.529400 - 77.250200"],     [28.5541,77.2637,"2016-07-18 07:43:59 - 28.554100 - 77.263700"],     [28.5635,77.2648,"2016-07-18 07:46:08 - 28.563500 - 77.264800"],     [28.5721,77.2579,"2016-07-18 07:48:07 - 28.572100 - 77.257900"],     [28.5746,77.2608,"2016-07-18 07:49:14 - 28.574600 - 77.260800"],     [28.5787,77.2813,"2016-07-18 07:51:16 - 28.578700 - 77.281300"],     [28.5731,77.3086,"2016-07-18 07:52:39 - 28.573100 - 77.308600"],     [28.5902,77.336,"2016-07-18 07:58:00 - 28.590200 - 77.336000"],     [28.6252,77.3735,"2016-07-18 08:49:47 - 28.625200 - 77.373500"]     ]     }     };  var timeout = 100; var m = 0; var cnt = 0; var markers = []; var combinedresults; var directionsresultsreturned = 0; var linecolors = ['red', 'blue', 'green', 'yellow'];  for(key in response) {     if(response[key].points.length > 0) {             var blocks = [];             var k = 0;             for(var i=0;i<response[key].points.length;i++) {                 if(i != 0 && % 10 == 0) {                     k++;                 }                 //console.log(k);                 if(typeof blocks[k] == 'undefined') {                     blocks[k] = [];                 }                  blocks[k].push(response[key].points[i]);             }             //var ds = [];             //var dd = [];             ds = new google.maps.directionsservice;             dd = new google.maps.directionsrenderer({suppressinfowindows: true, suppressmarkers: true});             dd.setmap(map);              for(i=0;i<blocks.length;i++) {                  /*ds[m] = new google.maps.directionsservice;                 dd[m] = new google.maps.directionsrenderer({suppressinfowindows: true, suppressmarkers: true, polylineoptions: {                   strokecolor: linecolors[i]                 }});                 dd[m].setmap(map);                 */                  waypts = [];                 markers.push([blocks[i][0][0], blocks[i][0][1], blocks[i][0][2]]);                 for(var j=1;j<blocks[i].length-1;j++) {                     waypts.push({                         location: blocks[i][j][0]+','+blocks[i][j][1],                         stopover: true                     });                     //var mylatlng = new google.maps.latlng(blocks[i][j][0],blocks[i][j][1]);                     markers.push([blocks[i][j][0],blocks[i][j][1],blocks[i][j][2]]);                  }                 markers.push([blocks[i][blocks[i].length-1][0], blocks[i][blocks[i].length-1][1], blocks[i][blocks[i].length-1][2]]);                 //data.start[0]+','+data.start[1],                 //ds[m].route({                     dd.setoptions({suppressinfowindows: true, suppressmarkers: true, polylineoptions: {                   strokecolor: linecolors[cnt%3]                 }});                 ds.route({                         'origin': blocks[i][0][0]+','+blocks[i][0][1],                         'destination': blocks[i][blocks[i].length-1][0]+','+blocks[i][blocks[i].length-1][1],                         'waypoints': waypts,                         'travelmode': 'driving'                     },                     function (directions, status){                         //console.log(dd[m]);                         if (status == google.maps.directionsstatus.ok) {                              if (directionsresultsreturned == 0) { // first bunch of results in. new combinedresults object                                 combinedresults = directions;                                 directionsresultsreturned++;                             }                             else {                                 // building legs, overview_path, , bounds in consolidated object. not complete                                 // directionresults object, enough draw path on map, need                                 combinedresults.routes[0].legs = combinedresults.routes[0].legs.concat(directions.routes[0].legs);                                 combinedresults.routes[0].overview_path = combinedresults.routes[0].overview_path.concat(directions.routes[0].overview_path);                                  combinedresults.routes[0].bounds = combinedresults.routes[0].bounds.extend(directions.routes[0].bounds.getnortheast());                                 combinedresults.routes[0].bounds = combinedresults.routes[0].bounds.extend(directions.routes[0].bounds.getsouthwest());                                 directionsresultsreturned++;                             }                             //dd[m].setoptions({suppressinfowindows: true, suppressmarkers: true, polylineoptions: {                               if (directionsresultsreturned == blocks.length) { // we've received results. put map                                  //dd[m].setdirections(combinedresults);                                 dd.setdirections(combinedresults);                             }                                 /*dd[m].setdirections(directions);                             console.log(i);                             console.log(linecolors[i%3])                             dd[m].setoptions({suppressinfowindows: true, suppressmarkers: true, polylineoptions: {                               strokecolor: linecolors[i%3]                           }});*/                         }                     }                 );              }         }      for(h=0;h<markers.length;h++) {         createmapmarker(map, new google.maps.latlng(markers[h][0],markers[h][1]), markers[h][2], "", "");     }     cnt++;  } } function createmapmarker(map, latlng, label, html, sign) {     var marker = new google.maps.marker({         position: latlng,         map: map,         icon: "http://www.google.com/mapfiles/marker"+ sign +".png",         title: label,         //zindex: math.round(latlng.lat()*-100000)<<5     });      marker.myname = label;       return marker; }   </script>  <script async defer     src="https://maps.googleapis.com/maps/api/js?key=api_key&callback=initmap"> </script> 

key dataset id

update : updated running code, google api key need replaced

you need create directionsrenderer each dataset. if dataset contains more 8 waypoints need combine results directionsservice.

proof of concept fiddle

code snippet:

function initmap() {    map = new google.maps.map(document.getelementbyid('map'), {      zoom: 14,      center: {        lat: 28.6247,        lng: 77.3731      },      disabledefaultui: true,    });      var directionsservice = new google.maps.directionsservice;    var directionsdisplay = new google.maps.directionsrenderer({      suppressinfowindows: true,      suppressmarkers: true    });      var response = {      "abcd": {        "points": [          [28.5435, 77.2051, "2016-07-17 08:02:18 - 28.543500 - 77.205100"],          [28.5313, 77.249, "2016-07-17 12:32:38 - 28.531300 - 77.249000"],          [28.5279, 77.2462, "2016-07-17 12:35:02 - 28.527900 - 77.246200"],          [28.5328, 77.2391, "2016-07-17 12:36:42 - 28.532800 - 77.239100"],          [28.5407, 77.24, "2016-07-17 12:38:23 - 28.540700 - 77.240000"],          [28.543, 77.2139, "2016-07-17 12:42:36 - 28.543000 - 77.213900"],          [28.5429, 77.2095, "2016-07-17 12:43:26 - 28.542900 - 77.209500"],          [28.5332, 77.2071, "2016-07-17 12:48:30 - 28.533200 - 77.207100"],          [28.531, 77.2113, "2016-07-17 12:52:43 - 28.531000 - 77.211300"],          [28.5315, 77.2077, "2016-07-17 13:03:15 - 28.531500 - 77.207700"],          [28.5433, 77.2117, "2016-07-17 13:08:27 - 28.543300 - 77.211700"],          [28.5412, 77.2374, "2016-07-17 13:12:50 - 28.541200 - 77.237400"],          [28.5311, 77.2482, "2016-07-17 17:49:02 - 28.531100 - 77.248200"]        ]      },      "ret-abcd": {        "points": [          [28.5294, 77.2502, "2016-07-18 07:29:38 - 28.529400 - 77.250200"],          [28.5541, 77.2637, "2016-07-18 07:43:59 - 28.554100 - 77.263700"],          [28.5635, 77.2648, "2016-07-18 07:46:08 - 28.563500 - 77.264800"],          [28.5721, 77.2579, "2016-07-18 07:48:07 - 28.572100 - 77.257900"],          [28.5746, 77.2608, "2016-07-18 07:49:14 - 28.574600 - 77.260800"],          [28.5787, 77.2813, "2016-07-18 07:51:16 - 28.578700 - 77.281300"],          [28.5731, 77.3086, "2016-07-18 07:52:39 - 28.573100 - 77.308600"],          [28.5902, 77.336, "2016-07-18 07:58:00 - 28.590200 - 77.336000"],          [28.6252, 77.3735, "2016-07-18 08:49:47 - 28.625200 - 77.373500"]        ]      }    };      var timeout = 100;    var m = 0;    var cnt = 0;    var markers = [];    var combinedresults;    var directionsresultsreturned = 0;    var linecolors = ['red', 'blue', 'green', 'yellow'];    var coloridx = 0;    var dd = [];      (key in response) {      if (response[key].points.length > 0) {        var blocks = [];        var k = 0;        (var = 0; < response[key].points.length; i++) {          if (i != 0 && % 10 == 0) {            k++;          }          //console.log(k);          if (typeof blocks[k] == 'undefined') {            blocks[k] = [];          }            blocks[k].push(response[key].points[i]);        }          ds = new google.maps.directionsservice;          (i = 0; < blocks.length; i++) {            waypts = [];          markers.push([blocks[i][0][0], blocks[i][0][1], blocks[i][0][2]]);          (var j = 1; j < blocks[i].length - 1; j++) {            waypts.push({              location: blocks[i][j][0] + ',' + blocks[i][j][1],              stopover: true            });            //var mylatlng = new google.maps.latlng(blocks[i][j][0],blocks[i][j][1]);            markers.push([blocks[i][j][0], blocks[i][j][1], blocks[i][j][2]]);            }          markers.push([blocks[i][blocks[i].length - 1][0], blocks[i][blocks[i].length - 1][1], blocks[i][blocks[i].length - 1][2]]);          //data.start[0]+','+data.start[1],          //ds[m].route({               ds.route({              'origin': blocks[i][0][0] + ',' + blocks[i][0][1],              'destination': blocks[i][blocks[i].length - 1][0] + ',' + blocks[i][blocks[i].length - 1][1],              'waypoints': waypts,              'travelmode': 'driving'            },            function(directions, status) {              dd.push(new google.maps.directionsrenderer({                suppressinfowindows: true,                suppressmarkers: true,                polylineoptions: {                  strokecolor: linecolors[coloridx++ % 3]                },                map: map              }));                if (status == google.maps.directionsstatus.ok) {                dd[dd.length - 1].setdirections(directions);              }            }          );          }      }        (h = 0; h < markers.length; h++) {        createmapmarker(map, new google.maps.latlng(markers[h][0], markers[h][1]), markers[h][2], "", "");      }      cnt++;      }  }    function createmapmarker(map, latlng, label, html, sign) {    var marker = new google.maps.marker({      position: latlng,      map: map,      icon: "http://www.google.com/mapfiles/marker" + sign + ".png",      title: label,    });      marker.myname = label;        return marker;  }  google.maps.event.adddomlistener(window, "load", initmap);

html,  body {    height: 100%;    width: 100%;    margin: 0px;    padding: 0px  }  #map {    height: 100%;    width: 100%;    border: 1px solid #000;  }

<script src="https://maps.googleapis.com/maps/api/js"></script>  <div id="map"></div>