如何在調整地圖容器大小後居中放大Google地圖？

Question

我有許多標記的地圖。

調整地圖後，它看起來像這樣：

，我想這一點：

我怎麼能放大和中心調整大小後在標記上映射？

我有以下代碼;

var map; 

var GoogleMaps = { 
    setMarkers: function(stores){ 
    map = new google.maps.Map(document.getElementById('map-canvas')); 

    $.each(stores, function (key, store) { 
     /* (..) */ 
     bounds.extend(latLng); 
    }); 

    map.fitBounds(bounds); 

    // This part is never triggered 
    google.maps.event.addDomListener(window, 'resize', function() { 
     var center = map.getCenter(); 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(center);  
    }); 
    } 
} 

HTML
當我點擊圖標調整大小，我添加了一個CSS類map-canvas

<div class="map-container alt-row row-spacer clearfix"> 
    <section class="column12"> 
    <div id="map-canvas" class=""></div> 
    </section> 
</div> 

我看過類似的問題（here和here），但他們不解決我的問題。

有誰知道我該如何做到這一點？你可以look at my JSFiddle here。

Answer 1

重新設置地圖，以適應當map DIV被調整的範圍應該工作：

google.maps.event.addDomListener(document.getElementById('map-canvas'), 'resize', function() { 
    google.maps.event.trigger(map, "resize"); 
    map.fitBounds(bounds); 
}); 

Answer 2

你可以嘗試的idle代替resize事件用於這一目的。

例

var map; 
 

 
var GoogleMaps = { 
 
    setMarkers: function (stores) { 
 
     map = new google.maps.Map(document.getElementById('map-canvas')); 
 

 
     var bounds = new google.maps.LatLngBounds(); 
 
     $.each(stores, function (key, store) { 
 

 
      var storePos = new google.maps.LatLng(store[1], store[2]); 
 

 
      var marker = new google.maps.Marker({ 
 
       position: storePos, 
 
       title: store[0], 
 
       map: map 
 
      }); 
 

 

 
      bounds.extend(storePos); 
 
     }); 
 

 
     map.fitBounds(bounds); 
 

 

 
     /*google.maps.event.addDomListener(map, 'resize', function() { 
 
      var center = map.getCenter(); 
 
      google.maps.event.trigger(map, "resize"); 
 
      map.setCenter(center); 
 
     });*/ 
 

 
     google.maps.event.addListener(map, 'idle', function (event) { 
 
      var center = map.getCenter(); 
 
      map.setCenter(center); 
 
      document.getElementById('result').innerHTML += 'Adjusted..'; 
 
     }); 
 
    } 
 
} 
 

 

 
google.maps.event.addDomListener(window, 'load', function() { 
 
    var stores = [ 
 
     ['0183 Oslo, Norja', 59.918816, 10.751814], 
 
     ['1154 Oslo, Norja', 59.873011, 10.814299], 
 
     ['0264 Oslo, Norja', 59.916751, 10.705809] 
 
    ]; 
 
    GoogleMaps.setMarkers(stores); 
 
});

html, body, #map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
<div id="map-canvas"></div> 
 
<div id='result'/>