title: Drawing Multiple Polygons on Google Maps API v3 from MySQL database
body: <p>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.</p>
  
  <pre><code>&lt;subdivision name="Auburn Hills"&gt;
      &lt;coord lat="39.00748" lng="-92.323222"/&gt;
      &lt;coord lat="39.000843" lng="-92.323523"/&gt;
      &lt;coord lat="39.000509" lng="-92.311592"/&gt;
      &lt;coord lat="39.007513" lng="-92.311378"/&gt;
      &lt;coord lat="39.00748" lng="-92.323222"/&gt;
  &lt;/subdivision&gt;
  &lt;subdivision name="Vanderveen"&gt;
      &lt;coord lat="38.994206" lng="-92.350645"/&gt;
      &lt;coord lat="38.985033" lng="-92.351074"/&gt;
      &lt;coord lat="38.984699" lng="-92.343092"/&gt;
      &lt;coord lat="38.981163" lng="-92.342234"/&gt;
      &lt;coord lat="38.984663" lng="-92.3335"/&gt;
      &lt;coord lat="38.993472" lng="-92.333179"/&gt;
      &lt;coord lat="38.994206" lng="-92.350645"/&gt;
  &lt;/subdivision&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>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 &lt; 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);
  </code></pre>
  
  <p>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!</p>