Javascript 调整地图容器的大小后，如何居中缩放谷歌地图？

我有一张有很多标记的地图

调整地图大小后，其外观如下所示：

我想要这个：

调整大小后，如何放大地图并将其居中放置在标记上

我有以下代码

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
当我单击resize图标时，我将css类添加到

MapCanvas

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

我看过类似的问题（和），但它们并不能解决我的问题

有人知道我怎样才能做到这一点吗？您可以。

当调整

映射

div的大小时，重新设置映射以适应边界应该会起作用：

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

---

为此，您可以尝试

idle

而不是

resize

事件

示例

var映射；
var谷歌地图={
设置标记：函数（存储）{
map=newgoogle.maps.map（document.getElementById（'map-canvas'）；
var bounds=new google.maps.LatLngBounds（）；
$。每个（存储、功能（键、存储）{
var storePos=new google.maps.LatLng（store[1]，store[2]）；
var marker=new google.maps.marker({
位置：storePos，
标题：存储[0]，
地图：地图
});
扩展（storePos）；
});
映射边界（bounds）；
/*google.maps.event.addDomListener（映射，'resize'，函数（）{
var center=map.getCenter（）；
google.maps.event.trigger（map，“resize”）；
地图设置中心（中心）；
});*/
google.maps.event.addListener（映射，'idle'，函数（事件）{
var center=map.getCenter（）；
地图设置中心（中心）；
document.getElementById（'result'）.innerHTML+='Adjusted..'；
});
}
}
google.maps.event.addDomListener（窗口'load'，函数（）{
变量存储=[
[0183奥斯陆，诺亚'，59.918816，10.751814]，
['1154奥斯陆，诺亚'，59.873011，10.814299]，
['0264奥斯陆，诺亚'，59.916751，10.705809]
];
谷歌地图。设置标记（商店）；
});
html，主体，#地图画布{
身高：100%；
边际：0px；
填充：0px；
}

问题在于DOM侦听器从未被触发。我尝试并添加了
console.log（'test'）
——但没有输出。我为地图添加了HTML代码。我认为侦听器使用了错误的DOM元素。我尝试了
google.maps.event.addDomListener（$（'.map container'），'resize'，
，但也没有成功。是$（'.map container'））一个DOM元素还是一个DOM元素数组？正如您在上面看到的，是DIV被调整了大小。仔细看我的代码，我发现我正在向
map canvas
元素添加一个类。所以调整大小的不是容器，而是映射画布。这意味着使用
document.getElementById（'map-canvas'））
应该可以。如果你否决投票，至少要说明原因。谢谢。不过我无法让它工作。尝试了
resize
和
idle
。你能看看我的小提琴吗？