谷歌地图响应resize

我试图让谷歌地图响应和resize,同时保持其中心的Windowsresize。 我阅读其他堆栈问题,如:

响应Google Map? 和中心Google地图(V3)浏览器resize(响应)

从第二个堆栈的问题, 我得到了一个链接,帮助我的部分代码,但我仍然没有运气。 这是我使用的代码,当我调整窗口大小时,地图不会resize

function initialize() { var mapOptions = { center: new google.maps.LatLng(40.5472,12.282715), zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); }); 

HTML

  <div id="map-canvas"/> 

CSS

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

将您的地图variables移动到事件侦听器可以使用的范围中。 您在initialize()函数内部创build映射,在创build时没有其他任何东西可以使用它。

 var map; //<-- This is now available to both event listeners and the initialize() function function initialize() { var mapOptions = { center: new google.maps.LatLng(40.5472,12.282715), zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); });