Google Map Polyline Arrays - google-maps

Question

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?
Here is the code from google documentation:
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
});
}
I have made some of my own code:
<script>
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);
</script>
And when i run it. It does not work. Thank you for any response.

Answer 1

I think you need to change this:
var NewPath = [new google.maps.LatLng(-27.46758, 153.027892)];
addNewPoint(NewPath);
to this:
var NewPath = new google.maps.LatLng(-27.46758, 153.027892);
addNewPoint(NewPath);
So you only pass through a LatLng point, rather than an array containing one. So it corresponds more closely to the example you gave,
path.push(event.latLng);