title: Google Map Polyline Arrays
body: <p>I am new at Google Map applications. I have read an article about Polyline Arrays (https://developers.google.com/maps/documentation/javascript/overlays#PolylineArrays). In the example, it created a dynamic arrays using Event Click. My question is, is it possible that i can create a polyline in an array variable not on a click event? </p>
  
  <p>Here is the code from google documentation:</p>
  
  <pre><code>var poly;
  var map;
  
  function initialize() {
    var chicago = new google.maps.LatLng(41.879535, -87.624333);
    var mapOptions = {
      zoom: 7,
      center: chicago,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  
    var polyOptions = {
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    }
    poly = new google.maps.Polyline(polyOptions);
    poly.setMap(map);
  
    // Add a listener for the click event
    google.maps.event.addListener(map, 'click', addLatLng);
  }
  
  /**
   * Handles click events on a map, and adds a new point to the Polyline.
   * @param {MouseEvent} mouseEvent
   */
  function addLatLng(event) {
  
    var path = poly.getPath();
  
    // Because path is an MVCArray, we can simply append a new coordinate
    // and it will automatically appear
    path.push(event.latLng);
  
    // Add a new marker at the new plotted point on the polyline.
    var marker = new google.maps.Marker({
      position: event.latLng,
      title: '#' + path.getLength(),
      map: map
    });
  }
  </code></pre>
  
  <p>I have made some of my own code:</p>
  
  <pre><code>&lt;script&gt;
          var line;
          var map;
          function initialize() {
              var mapDiv = document.getElementById('map-canvas');
              map = new google.maps.Map(mapDiv, {
                  center: new google.maps.LatLng(0, -180),
                  zoom: 2,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              });
              var path = [new google.maps.LatLng(37.772323, -122.214897),
                  new google.maps.LatLng(21.291982, -157.821856)];
  
              line = new google.maps.Polyline({
                  path: path,
                  strokeColor: '#ff0000',
                  strokeOpacity: 1.0,
                  strokeWeight: 2
              });
  
              line.setMap(map)
          }
  
          function addNewPoint(position) {
              var path = line.getPath();
              path.push(position);
          }
  
          ''''' I create a single variable for a new path.
          var NewPath = [new google.maps.LatLng(-27.46758, 153.027892)];
          addNewPoint(NewPath);
  
          google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
  </code></pre>
  
  <p>And when i run it. It does not work. Thank you for any response. </p>