Draw airline flight map using Google Map APIs

Question

I am trying to draw an airline flight map using Google Map APIs. But I got some issues in generating polylines between every two points. So far, it only returns one polyline of the very first two points. I could not find any error so far. Is there anything wrong with the last for loop? Any comments and help will be highly appreciated!

function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: {lat: 41.871314, lng: -99.869580},
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });

    var Lat = [42.365843,37.756066,47.450431,28.431450,38.898793,34.040667];
    var Lng = [-71.009625,-122.440175,-122.308806,-81.308094,-77.037227,-118.289537];

    var lineSymbol = {
         path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
        };

    var Poly = new Array();
        for (var i = 0; i<Lat.length; i++) {
             var pos = new google.maps.LatLng(Lat[i],Lng[i]);
             Poly.push(pos);
        };

    for (var j = 0; j<Poly.length; j++) {   
         if (j%2 == 0){
             var poly = new Array();
             poly = Poly.slice(j,j+2);
             var flowline = new google.maps.Polyline({
                                path: poly,
                                geodesic: true,
                                strokeColor: "#DC143C",
                                strokeOpacity: .8,
                                strokeWeight: 2,
                                icons: [{
                                  icon: lineSymbol,
                                  offset: '100%'
                                }],
                               });
            }
        };

    flowline.setMap(map);
}

Answer 1

You are only setting the map property of the last polyline. This is outside of the loop that creates the polylines:

flowline.setMap(map); 

proof of concept fiddle

code snippet:

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 41.871314,
      lng: -99.869580
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var Poly = new Array();
  for (var i = 0; i < Lat.length; i++) {
    var pos = new google.maps.LatLng(Lat[i], Lng[i]);
    Poly.push(pos);
  }
  var flowlineNonGeodesic = new google.maps.Polyline({
    path: Poly,
    geodesic: false,
    strokeColor: "#00FF00",
    strokeOpacity: .8,
    strokeWeight: 2,
    map: map
  });
  for (var j = 0; j < Poly.length; j++) {
    if (j % 2 == 0) {
      var poly = Poly.slice(j, j + 2);
      var flowline = new google.maps.Polyline({
        path: poly,
        geodesic: true,
        strokeColor: "#DC143C",
        strokeOpacity: .8,
        strokeWeight: 2,
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }],
      });
      flowline.setMap(map);
    }
  }
}
google.maps.event.addDomListener(window, "load", initMap);

var Lat = [42.365843, 37.756066, 47.450431, 28.431450, 38.898793, 34.040667];
var Lng = [-71.009625, -122.440175, -122.308806, -81.308094, -77.037227, -118.289537];

var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>