Google Maps JS API v3 - Simple multiple marker + polyline

Question

I've been trying to extend this example to include polylines. So far I haven't been able to get it to work at all. My code currently looks like this:

function initialize() {
  var locations = [
      [12.239107980270559, 109.1947902572488, 'Nha Trang', 'Vietnam', '27/03/13', 1],                            
      [11.938864949999937, 108.43334708999994, 'Dalat', 'Vietnam', '28/03/13', 2],                            
      [10.76674113559709, 106.69295712387172, 'Ho Chi Minh', 'Vietnam', '02/04/13', 3],                            
      [10.035511715481054, 105.78650841255843, 'Can Tho', 'Vietnam', '06/04/13', 4],                            
      [10.379392700137583, 104.48601004588143, 'Ha Tien', 'Vietnam', '07/04/13', 5],                            
      [10.607085236979454, 104.18364549108138, 'Kampot', 'Cambodia', '09/04/13', 6],                            
      [10.615441163514843, 103.5214887207791, 'Sihanoukville', 'Cambodia', '12/04/13', 7],                           
      [10.575040390060632, 103.54923875808034, 'Otres Beach', 'Cambodia', '15/04/13', 8] 
  ];
  var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 9,
    center: new google.maps.LatLng(10.575040390060632, 103.54923875808034),
    panControl: false,
    scaleControl: false,
    mapTypeControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.RIGHT_TOP
    }
  };
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var infowindow = new google.maps.InfoWindow();
  var marker, poly, i;
  for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][0], locations[i][1]),
      map: map
    });
    poly = new google.maps.Polyline({
      path: new google.maps.LatLng(locations[i][0], locations[i][1]),
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][2]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyAhnheFVYaMG44DfbXYCuNmKHuf15Ar1_I&sensor=true&callback=initialize";
  document.body.appendChild(script);
}
window.onload = loadScript;

I guess the problem is with the array as it's not the standard way of doing it (according to the Google docs), I just don't know how to call it properly. Any help is greatly appreciated.

Answer 1

You need to move the creation of the polyline out of the loop, and supply an array of LatLng objects to it.

var arr = [];
for (var i = 0; i < locations.length; i++) {  
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][0], locations[i][1]),
      map: map
    });
    arr.push(marker.getPosition());

  // <-- snipped -->
}

Edit:

  var poly = new google.maps.Polyline({
      path: arr,
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3,
      map: map    
    });