How to add polylines with an array of position?

Question

I have a simple array containing name of cities. I'm trying to loop through this array and add markers linked by Polylines on the Google Map.

Here is my code:

 function addMarkerCity(cities) {
   $.each(cities, function(index, value) {
    geocoder.geocode({'address': value}, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
       var cityPosition = results[0].geometry.location;
       flightRoute.push(cityPosition);
       var currentMarker = map.addMarker({
         position: cityPosition
       });
     });
   });
 });
}

The function addMarkerCity works fine and triggered by a JQuery event click() button. I'm using the array flightRoute to store each position of each marker and then pass it to the function which will create the polyline between the 2 markers.

The problem now is that I only see the polyline on the map if I click twice on the button to make it work.

When I'm doing:

console.log(flightRoute);

The array flightRoute is equal to [] first and then I can see the LatLng of the 2 previously created markers. Can someone tell me what I'm doing wrong, to get the position inside flightRoute and display straight away the markers. I'm very close to get the result that I want.

Answer 1

In order to add points to a polyline dinamically

1. you need to have an array of the type google.maps.MVCArray

   var points = new google.maps.MVCArray();

2. you need to pass that mvcarray to the polyline

   var polyline = new google.maps.Polyline({ path: points });