谷歌地圖自動適合（汽車中心和自動縮放）不起作用

Question

我有一個地圖上的問題，我已經使用了地圖方法，它應該給予適當的縮放和地圖的中心給它一個Latlon陣列。下面的代碼：

<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> 

的標記正確放置在地圖上，但我得到的最大可用變焦：

任何幫助嗎？

Answer 1

我已經更新了你的提琴在這裏：http://jsfiddle.net/KwayW/1/

現在按預期工作。

下面是完整的代碼（它保存爲test.html的在瀏覽器中打開）：

<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>