谷歌地图不会全屏呈现整个地图答案

【问题标题】：Google Maps don't render the whole map upon full screen谷歌地图不会全屏呈现整个地图
【发布时间】：2012-04-08 23:54:21
【问题描述】：

我在调整 Google Maps JavaScript API v3 的大小时遇到了一些问题。如果我在加载时正确设置 CSS“参数”（就在 documentation 中），地图将显示 100% 的高度和宽度 - 没问题。但是，当我尝试通过单击链接来获得相同的结果时，它并没有显示整个地图。

我已经在这个事件的 jQuery 中测试了 css() 和 toggleClass()。 toggleClass() 使用以下代码使地图不可见（完全隐藏地图而不是全屏）：

// jQuery
$('#weather-map').toggleClass('test');

// CSS
#weather-map.test {
    height : 100%;
    width : 100%;
    top : 0;
    left : 0;
    position : absolute;
    z-index : 200;
}

css() 有效（地图全屏显示），但上图显示了地图在全屏时的呈现方式：

$('#weather-map').css({
                       'height' : '100%',
                       'width' : '100%',
                       'top' : '0',
                       'left' : '0',
                       'position' : 'absolute',
                       'z-index' : '200'
                      });

我现在想知道，为什么会这样？我是否遗漏了什么，或者这种方法不适合切换全屏地图？

提前致谢。

【问题讨论】：

标签： css google-maps-api-3 fullscreen

【解决方案1】：

这只是因为 Google 的映射 Javascript 是如何工作的。它根据容器的大小进行渲染，并且不会添加任何类型的处理程序来重新渲染，以防容器此后重新调整大小。我想在上面的示例中，您必须再次调用地图初始化代码才能在调整大小的 div 中再次呈现地图。

【讨论】：

非常感谢！您的回答解决了我的问题，我会尽快接受 :)
几周前我遇到了这个问题 - 非常烦人，也很难解决。这只是让容器开始变大，然后缩小 - 与开始变小并变大的问题。
更好的是触发resize事件，google.maps.event.trigger(map, 'resize'); - 这会导致 API 重新计算其维度。调整容器大小后立即运行。
+1 为 barryhunter，最好在触发调整大小后再次 setCenter。