我正在努力让谷歌地图在我的网站上运行。问题是地图显示如下：
据我所知，在显示 div 后重新调整对象大小是一个已知问题。（从更改display: none;为display: block;）
我在display: none;封装选项卡的 div 上使用 JQueryUI 选项卡和 a 。
我确实尝试删除选项卡并在开始时将所有选项卡显示为一个块，然后进行更改window.load- 但是在加载后让手表自行移动是相当难看的。
这个JSFiddle演示了我想要它的方式（简化），尽管它有缺陷，因为我无法使其正常工作（它根本没有显示地图）。
是否有其他方法可以做到这一点 - 还是我必须为我的地图功能找到不同类型的布局？
我发现唯一可靠的方法是用画布初始化地图display:block，然后隐藏它。如果这是在 $(function() {...}) 结构中完成的，那么在隐藏之前您不应该看到地图。
您还可以尝试在显示画布后最初隐藏画布并在第一次需要时初始化地图。
无论哪种方式，只有在其画布可见时才初始化地图。
采用
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$("#map_canvas").css("height", $(window).height());
当您在地图初始化后操作任何地图的外部 div 时，就会发生这种情况。因此，要解决此问题，您必须在显示所有外部 div 后初始化地图。
所以只需在最后初始化地图：
$mapsOuterDivs.slideToggle(700);
setTimeout(function(){
initializeGoogleMap();
},300);