So, I am attempting to draw multiple polygons onto a google map via polygon spatial data from my MySQL table. I have a php script that outputs the following XML based off my table data.

<subdivision name=Auburn Hills>

    <coord lat=39.00748 lng=-92.323222/>

    <coord lat=39.000843 lng=-92.323523/>

    <coord lat=39.000509 lng=-92.311592/>

    <coord lat=39.007513 lng=-92.311378/>

    <coord lat=39.00748 lng=-92.323222/>

</subdivision>

<subdivision name=Vanderveen>

    <coord lat=38.994206 lng=-92.350645/>

    <coord lat=38.985033 lng=-92.351074/>

    <coord lat=38.984699 lng=-92.343092/>

    <coord lat=38.981163 lng=-92.342234/>

    <coord lat=38.984663 lng=-92.3335/>

    <coord lat=38.993472 lng=-92.333179/>

    <coord lat=38.994206 lng=-92.350645/>

</subdivision>

My issue is that the javascript I am using to try and draw each shape onto the map is returning odd coordinates. using an alert, I can see that the array that is meant to store the coordinates for the new google.maps.Polygon is returning the first latitude and longitude pair for each shape and drawing a line segment as opposed to the full polygon. The problematic javascript is below.

function initialize() {

    var mapOptions = {

        ...

    };



    var map = new google.maps.Map(document.getElementById('map-canvas'),

  mapOptions);

    var arr = new Array();

    var polygons = [];



    downloadUrl(subdivision-coordinates.php, function(data) {

        var xml = data.responseXML;

        var subdivision = xml.documentElement.getElementsByTagName(subdivision);

        for (var i = 0; i < subdivision.length; i++) {

            var coordinates = xml.documentElement.getElementsByTagName(subdivision)[i].getElementsByTagName(coord);

            arr.push( new google.maps.LatLng(

                    parseFloat(coordinates[i].getAttribute(lat)),

                    parseFloat(coordinates[i].getAttribute(lng))

            ));



            polygons.push(new google.maps.Polygon({

                paths: arr,

                strokeColor: '#FF0000',

                strokeOpacity: 0.8,

                strokeWeight: 2,

                fillColor: '#FF0000',

                fillOpacity: 0.35

            }));

            polygons[polygons.length-1].setMap(map);

        }

  });

}

function downloadUrl(url, callback) {

  ..blah..blah stuff from google

}

function doNothing() {}

google.maps.event.addDomListener(window, 'load', initialize);

The issue seems to be clearly related to how I am pushing the data into the array arr. I've tried a few different methods of handling it and nothing seems to be working (I am admittedly a novice when it comes to javascript). Any advice would be greatly appreciated!