title: PanTo multiple markers
body: <p>say I load new markers from an external source, it looks like this:</p>
  
  <pre><code>var markersArray = [];
  
  downloadUrl("eventsxml.php", function(data) {
          var xml = data.responseXML;
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i &lt; markers.length; i++) {
            var name = markers[i].getAttribute("id");
            var address = markers[i].getAttribute("id");
            var type = markers[i].getAttribute("venue_type");
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
            var html = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + address;
            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
              map: map,
              position: point,
              icon: icon.icon,
              shadow: icon.shadow
  
            });
            markersArray.push(marker);
            bindInfoWindow(marker, map, infoWindow, html);
          }
        });
  </code></pre>
  
  <p>How would I go about gathering the bounds for the markers and then panning them all into view once they're loaded? I did so much searching on google but none of those solutions have worked for me.</p>