Drawing Multiple Polylines in Google Maps JavaScript API

Question

I'm posting this question because most of the questions I found didn't really answer my question and I finally figured it out. Hopefully this will be helpful to someone else in order to clear things up much more quickly.

-EDIT- I've edited the question in hopes of it being more useful to anyone who comes across this.

-The Question- I am having trouble loading multiple polylines into google maps. I've tried passing an array to the new google.maps.Polyline function as follows;

var flightPlanCoordinates = [
        { lat: 41.7171899900261, lng: -85.002969973285587 },
        { lat: 41.716339720601695, lng: -85.00356011920411 },
    ];

    var flightPlanCoordinates2 = [
        { lat: 44, lng: -89 },
        { lat: 49, lng: -89 },
    ];

var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];

var flightPath = new google.maps.Polyline({
    path: arrayOfFlightPlans,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 4,
    });
flightPath.setMap(map);

That didn't work and caused the error "InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number"

My next attempt involved trying a for loop as follows (note the lat lng arrays did not change from the code snippet above);

for (let i = 0; i < 2; i++) {
        var flightPath = new google.maps.Polyline({
        path: arrayOfFlightPlans,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        id: segID
        });
}
flightPath.setMap(map);

This worked but did not provide the results I was hoping for. The lat lng output was the last set of coordinates in my array. What am I doing wrong? Shouldn't the loop establish a new polyline on each iteration of the for loop?

Answer 1

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 41.713, lng: -85.003},
        zoom: 16
    });

    var flightPlanCoordinates = [
        { lat: 41.7171899900261, lng: -85.002969973285587 },
        { lat: 41.716339720601695, lng: -85.00356011920411 },
        { lat: 41.715420123340095, lng: -85.003969783778473 },
        { lat: 41.713850219112373, lng: -85.0043800221203 },
        { lat: 41.709869880890324, lng: -85.004809740676933 },
        { lat: 41.709570224086633, lng: -85.004860160268152 },

    ];

    var flightPlanCoordinates2 = [
        { lat: 42, lng: -86 },
        { lat: 42, lng: -87},
        { lat: 42, lng: -88 },
        { lat: 43, lng: -88 },
        { lat: 44, lng: -89 },
        { lat: 49, lng: -89 },

    ];

    var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];

    //Loops through all polyline paths and draws each on the map.
    for (let i = 0; i < 2; i++) {
        var flightPath = new google.maps.Polyline({
        path: arrayOfFlightPlans[i],
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        });

        flightPath.setMap(map);
    }
}

Establish your coordinates and put them into an array. Using a for loop we can establish a new polyline path on each loop. The piece I was missing was that at the end of the for loop, the path needs to be drawn each time as seen below (An admittedly silly mistake but one that I didn't notice until I came into work this morning).

flightPath.setMap(map);

-EDIT- To provide further explanation, my thinking was that on each iteration of the for loop, a new google.maps.Polyline object was being instantiated and I was correct, but that doesn't mean a new polyline was being drawn on the map. The polyline only gets added to the map when you issue the setMap(map) command as show in the code above. That means, if we want a new polyline from each element in the array, we need to add each polyline to the map on each iteration of the loop.