Why is Google Maps API refusing to plot my Polyline array?

I think the problem has something to do with how I am building the path array for my Polyline but there has to be a way to do it like this. The goal is to create an array of Geocode locations from an array input fields named "address[]". I've gotten the Polyline to work by doing this:

// ARRAY
var linePath = [
new google.maps.LatLng(37.772323开发者_JAVA技巧, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];

// console.log(linePath);
[P { Ia=37.772323, Ja=-122.21489700000001}, P { Ia=21.291982, Ja=-157.82185600000003}, P { Ia=-18.142599, Ja=178.43100000000004}, P { Ia=-27.46758, Ja=153.02789200000007}]

But when I try to create an array from an $.each statement, the array comes out differently and doesn't work. Here is the code I have written:

// ARRAY
$("input[name='submit']").click(function() {
    var geocoder = new google.maps.Geocoder();
    locations = new Array();
    $("input[name='address[]']").each(function() {
        geocoder.geocode({"address" : this.value }, function(results) {
            var addrLl = results[0].geometry.location;
            locations.push(addrLl);
            var marker = new google.maps.Marker({
                map: map,
                position: addrLl
            });
        });
    });

    var connect = new google.maps.Polyline({
        path: locations,
        strokeColor: "#FF0000",
        strokeOpacity: 1.
    });
    connect.setMap(map);
    return false;
});

// console.log(locations);
[]
   [+] 0    P { Ia=41.8843266, Ja=-78.79295300000001}
   [+] 1    P { Ia=35.9614504, Ja=-79.04755590000002}

Any ideas what I should do?

Geocoding is asynchronous - your results may not have returned by the time you construct the polyline so will not be included in the polyline. When the geocoder does return (possibly up to a second later) the point will be added to locations, so you will see it when you console log the array, but the Polyline will not know about it.

Luckily the Maps API has a neat solution to this which is to use an MVCArray. Replace:

locations = new Array();

with

locations = new MVCArray();

Now, each time you add a new point to the array, even if it is after you have already created the polygon, the polygon will be notified and will update to include the point.