title: Google maps auto-fit (auto center & autozoom) doesn't work
body: <p>I have a problem with a map on which I've used the <code>fitBounds</code> map methods, which should give the proper zoom and center the map giving it a latlon array. here's the code:</p>
  
  <pre><code>&lt;script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;
  &lt;/script&gt;
  
  
  &lt;div id="map_canvas"&gt;
  
  &lt;script type="text/javascript"&gt;
      var map;
      var bounds = new google.maps.LatLngBounds(null);
  
      function initialize() {
          var mapOptions = {       
  
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
          map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
  
  
          &lt;?php
          foreach ($this-&gt;getProductCollection() as $_e):
              $event = Mage::getModel('catalog/product')-&gt;load($_e-&gt;getId());
              ?&gt;
                  var loc = new google.maps.LatLng("&lt;?php echo $event-&gt;getEventLocationLatitude(); ?&gt;","&lt;?php echo $event-&gt;getEventLocationLongitude(); ?&gt;");
                   bounds.extend(loc);
                  addMarker(loc, '&lt;?php echo $event-&gt;getName(); ?&gt;', "active");
                  bounds.extend(loc);
  
          &lt;?php endforeach; ?&gt;
  
  
          map.fitBounds(bounds);
          map.panToBounds(bounds);
  
  
      }
  
  
  function addMarker(location, name, active) {          
      var marker = new google.maps.Marker({
          position: location,
          map: map,
          title: name,
          status: active
      });
  
  }
  
  
  
  jQuery.noConflict();
  
  jQuery(document).ready(function(){
      initialize();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>The markers are correctly placed on the map, but I get the maximum zoom available:</p>
  
  <p><img src="https://i.stack.imgur.com/nrnvm.png" alt="enter image description here"></p>
  
  <p>Any help?</p>