Google maps ajuste automático (centro automático y autozoom) no funciona

Question

Tengo un problema con un mapa en el que he usado los métodos de mapa fitBounds, que debe dar el zoom adecuado y centrar el mapa dándole un latón formación. Aquí está el código:

<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
</script> 


<div id="map_canvas"> 

<script type="text/javascript"> 
    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); 



     <?php 
     foreach ($this->getProductCollection() as $_e): 
      $event = Mage::getModel('catalog/product')->load($_e->getId()); 
      ?> 
       var loc = new google.maps.LatLng("<?php echo $event->getEventLocationLatitude(); ?>","<?php echo $event->getEventLocationLongitude(); ?>"); 
       bounds.extend(loc); 
       addMarker(loc, '<?php echo $event->getName(); ?>', "active"); 
       bounds.extend(loc); 

     <?php endforeach; ?> 


     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(); 
}); 
</script> 

Los marcadores se colocan correctamente en el mapa, pero me da el zoom máximo disponible:

Cualquier ayuda?

Answer 1

He actualizado su violín aquí: http://jsfiddle.net/KwayW/1/

Ahora funciona como se esperaba.

Aquí está el código completo (Guardar como test.html y abierto en el navegador):

<style>#map_canvas { width:500px; height: 400px; }</style> 
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

<div id="map_canvas"></div> 

<script> 
var map; 
var markersArray = []; 
var image = 'img/'; 
var bounds = new google.maps.LatLngBounds(); 
var loc; 

function init(){ 
    var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

    loc = new google.maps.LatLng("45.478294","9.123949"); 
    bounds.extend(loc); 
    addMarker(loc, 'Event A', "active"); 

    loc = new google.maps.LatLng("50.83417876788752","4.298325777053833"); 
    bounds.extend(loc); 
    addMarker(loc, 'Event B', "active"); 

    loc = new google.maps.LatLng("41.3887035","2.1807378"); 
    bounds.extend(loc); 
    addMarker(loc, 'Event C', "active"); 

    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 
    }); 
} 

$(function(){ init(); }); 
</script>