Google map auto-fit (trung tâm tự động & autozoom) không hoạt động

Question

Tôi gặp sự cố với bản đồ mà tôi đã sử dụng phương pháp bản đồ fitBounds, nên cho phép thu phóng và căn giữa bản đồ mảng. đây là đoạn code:

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

Các dấu hiệu được đặt một cách chính xác trên bản đồ, nhưng tôi nhận được zoom tối đa có sẵn:

Bất kỳ sự giúp đỡ?

Answer 1

Tôi đã cập nhật fiddle của bạn tại đây: http://jsfiddle.net/KwayW/1/

Nó hoạt động như mong đợi.

Dưới đây là đoạn code đầy đủ (lưu này như test.html và cởi mở trong trình duyệt):

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