javascript - add array of polylines as distinct lines in googlemaps -

i'm working googlemaps api. i've looked answers q, found similar questions none seem work me.

i want add array of polylines googlemap distinct lines distinct colors, not 1 continuous line.

i'm pulling lat lng coordinates json file. array of polylines (themselves arrays of lat lng coords) variable in length.

i can't figure out how run polyline.setmap run again until there no more sets of polylines left in array.

here code in questions:

paths = []; allstrms = [];   $.getjson("json/basin/"+file+"", function(json) {   // iterate through each year array in json (i = 0; < json.year.length; i++) {  //only grab data 2013 if(json.year[i]["@attributes"].id == '2013') {  //iterate through latlng array in each storm object (p=0; p < json.year[i].storm.latlng.length; p++) {  //get each pair of lat / lng coordinates latlng array  var path = new google.maps.latlng(parsefloat(json.year[i].storm.latlng[p].latitude), parsefloat(json.year[i].storm.latlng[p].longitude));  //push paths array  $.each(path, function(){         paths.push(path);   }); }  //push paths allstrms array allstrms.push(paths);   for(p=0; p < json.year[i].storm.latlng.length; p++) {  function addpolyline() {      for(t=0;t<allstrms.length;t++) {          polyline = new google.maps.polyline({             path: allstrms[t],             geodesic: true,             strokecolor: 'yellow',             strokeopacity: 1,             strokeweight: 2           });         }         polyline.setmap(map);        //end loop      }   //end loop - json.year[i].storm.latlng     }  //end if condition year 2013  }   // end initial loop }     addpolyline();   //end $.getjson }); 

how set run polyline stop, run again, stop, etc... until lines on map , distinct?

here code in action. page loads array of polylines jumble of lines on page load.

http://wx.wpri.com/html/testing/ht/bt-v2.html

any appreciated!

thanks

1. push each lat/lng pair single polyline single array:

   if (json.year[i]["@attributes"].id == '2013') {     var path = [];     //iterate through latlng array in each storm object     (p = 0; p < json.year[i].storm.latlng.length; p++) {         //get each pair of lat / lng coordinates latlng array         var point = new google.maps.latlng(               parsefloat(json.year[i].storm.latlng[p].latitude),                parsefloat(json.year[i].storm.latlng[p].longitude)             );         path.push(point);     }  

2. push path onto allstrm array (and create it's polyline):

   //push paths allstrms array allstrms.push(path); var polyline = new google.maps.polyline({         path: path,         geodesic: true,         strokecolor: 'yellow',         strokeopacity: 1,         strokeweight: 2     });  polyline.setmap(map); 

complete $getjson function:

$.getjson("http://wx.wpri.com/html/testing/ht/json/basin/na.min.json", function(json) {    var json = json.parse(jsonstr);   // iterate through each year array in json   (i = 0; < json.year.length; i++) {     //only grab data 2013     if (json.year[i]["@attributes"].id == '2013') {         var path = [];         //iterate through latlng array in each storm object         (p = 0; p < json.year[i].storm.latlng.length; p++) {             //get each pair of lat / lng coordinates latlng array             var point = new google.maps.latlng(                   parsefloat(json.year[i].storm.latlng[p].latitude),                    parsefloat(json.year[i].storm.latlng[p].longitude)                 );             path.push(point);         }         //push paths allstrms array         allstrms.push(path);         var polyline = new google.maps.polyline({                 path: path,                 geodesic: true,                 strokecolor: 'yellow',                 strokeopacity: 1,                 strokeweight: 2             });          polyline.setmap(map);     }   }   //end $.getjson }); 

proof of concept fiddle