Plotting Multiple Polylines On Google Maps

I'm new to programming with Javascript and Google Maps so this may be a pretty simple question. I would like to plot multiple polylines on a Google Map. I have code written that

Solution 1:

I think you want this: working fiddle

Each pair of coordinates defines a single line segment. After drawing each line segment, start a new array of points and a new google.maps.Polyline.

working code snippet:

var map;
var trackLine = [];
var trackLats = [
  [
    [14.735, -20.595],
    [-13.913, 8.188]
  ],
  [
    [-14.788, 20.562],
    [13.879, -8.230]
  ],
  [
    [14.784, -20.546],
    [-13.818, 8.288]
  ],
  [
    [-14.837, 20.513],
    [13.784, -8.329]
  ],
  [
    [14.892, -20.439],
    [-13.758, 8.350]
  ]
];
var trackLons = [
  [
    [76.480, 90.967],
    [68.509, 98.386]
  ],
  [
    [-115.254, -100.759],
    [-123.226, -93.342]
  ],
  [
    [53.036, 67.521],
    [45.065, 74.937]
  ],
  [
    [-138.698, -124.204],
    [-146.669, -116.791]
  ],
  [
    [29.567, 44.049],
    [21.570, 51.438]
  ]
];

functioninitialize() {

  var mapCenter = new google.maps.LatLng(0.0, 139.0);
  var mapOptions = {
    zoom: 1,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var trackCoords = new google.maps.MVCArray;
  var i, j, k;

  for (i = 0; i < 5; i++) {
    for (j = 0; j < 2; j++) {
      trackCoords = [];
      for (k = 0; k < 2; k++) {
        trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
          trackLons[i][j][k]));
      }

      trackLine.push(new google.maps.Polyline({
        map: map,
        path: trackCoords,
        geodesic: true,
        strokeColor: '#FFFFFF',
        strokeOpacity: 0.4,
        strokeWeight: 3
      }));

      trackCoords.clear;
    }
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 90%;
  margin: 5px;
  padding: 1px;
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="map-canvas"></div>