我在我的页面上有一个谷歌地图和一个搜索面板，这个搜索面板是我自己构建的，可以随意显示和隐藏。它覆盖了地图的一侧，大约200像素。问题是，当我调整地图大小时，或者其他情况下，面板重叠的区域未被渲染，也就是说地图在那里没有渲染出来。
请查看此链接
在框中输入OMDB，这是一个机场的ICAO代码，然后按回车键。
结果会显示出来，你会看到面板。现在点击全屏链接，然后点击机场选项卡以使面板消失 - 你会发现部分地图根本没有渲染出来...我必须拖动地图，只有部分区域才能渲染。我该如何解决？
值得注意的是，我已经在Windows XP上运行了Google Chrome、Firefox和IE8。是否有一种方法可以强制完全渲染地图？这是一个相当不稳定的问题，可能与我的代码有关，也可能是主机问题。还是谷歌不喜欢我？ :(
编辑：看到侧边栏上的大丑补丁了吗？它是地图应该被渲染的区域，但没有渲染出来。无论缩放和平移多少次都无法清除它 :(
我无法复现您所遇到的问题，但它看起来与我之前在谷歌地图中见过的另一个问题类似。
似乎您可能正在遭遇谷歌地图确定哪些瓦片在视图中的方式。它仅在第一次将地图加载到div中时计算一次，并且如果div增大，则绘制的地图不足。幸运的是，这很容易处理。每当容器可能已调整大小时，在地图实例上使用checkResize()方法，剪辑区域将从容器的当前大小重新计算。
是的，你必须提供容器 DIV 的实际像素高度和宽度。这实际上在 Google API 中有详细说明。
可以使用类似以下的内容：
<div id="map_canvas" style="width:500px;height:500px;"></div>
代替
<div id="map_canvas"></div>
你就可以轻松完成了！
据我所见，这在OS X 10.6.2的Google Chrome上运行良好。
http://i33.tinypic.com/sfe3ah.png
唯一的问题是哥本哈根机场与你的应用程序所暗示的位置相距甚远，而LAX位于海洋中央;-)
编辑：
我看到了你的截图，我觉得似乎Google Maps没有渲染被搜索和搜索结果窗格覆盖的地图部分，之后在隐藏搜索窗格时未正确触发渲染。
我没有能在Google Maps API中找到一个体面的渲染触发器，但我认为你应该尝试像编程式缩放和移动地图中心到其他地方再返回，以便也许强制重新渲染地图。
或者你可以手动触发一些你认为可能会引起地图重新渲染的事件，例如google.maps.event.trigger(map, 'resize')。
我知道这些建议感觉就像是通过可怕的黑客方式使其工作，以及我非常不确定它是否会奏效，但这是我的最佳猜测；-)
$("#modal-map")
.modal()
.on("shown.bs.modal", function() {
google.maps.event.trigger(gmap, 'resize');
});
其中gmap是您创建的google.maps.Map对象。
当我尝试在对话框中加载谷歌地图时，我遇到了相同的问题。好像谷歌地图没有正确渲染。因此，我找到了下面的解决方案，这可能会解决你的问题。
在初始化对话框后，我触发了谷歌地图的重新调整大小事件，请检查下面的代码片段。
google.maps.event.trigger(map, 'resize', function () {
// your callback content
});
例子：
我通过ajax调用加载地图，然后初始化对话框，并最后触发了google地图的resize事件。
$.ajax({
url:"map.php",
type:"POST",
success:function(data){
$("#inlineEditForm").html(data);
$('#inlineEditPopUp').dialog('open');
google.maps.event.trigger(map, 'resize', function () {
// your callback content
});
}
});
google.maps.event.trigger($.goMap.map, 'resize');
$(document).on('click', '#mapClicker', 'initmap', function() {
setTimeout(function() {
google.maps.event.trigger($.goMap.map, 'resize');
$.goMap.fitBounds();
}, 100)
});
我知道这个问题有点老了，但是我刚刚遇到了一个类似的问题。不过，在我的情况下，我正在设置地图从中加载（为了实现全屏效果），而这个在一个
<div id="my-map"></div>
<script type="text/javascript">
$('#my-map').height($("#my-map-container").height());
$('#my-map').width($("#my-map-container").width());
google.maps.event.trigger($('#my-map'), 'resize');
</script>