如何在调整地图容器大小后居中放大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'/>