Jquery 1.9.1、CSS 和谷歌地图：“显示：无”问题答案

【问题标题】：Jquery 1.9.1, CSS & Google Maps: "Display: none" issueJquery 1.9.1、CSS 和谷歌地图：“显示：无”问题
【发布时间】：2013-04-16 13:19:12
【问题描述】：

我正在努力让 Google 地图在我的网站上运行。问题是地图显示如下：

据我所知，在显示 div 后重新调整对象大小是一个已知问题。（从display: none;改为display: block;即）

我在封装标签的 div 上使用 JQueryUI 选项卡和 display: none;。

我确实尝试删除选项卡并在开始时将所有选项卡显示为一个块，然后在 window.load 上进行更改 - 但是在加载后让手表自动移动是相当难看的。

这个JSFiddle 演示了我想要它的方式（简化），尽管它有缺陷，因为我无法使其正常工作（它根本没有显示地图）。

还有其他方法吗？还是我必须为我的地图功能找到一种不同的布局？

【问题讨论】：

我发现唯一可靠的方法是使用display:block 的画布初始化地图，然后将其隐藏。如果这是在 $(function() {...}) 结构中完成的，那么在隐藏之前您不应该看到地图。
这似乎是这样做的方法。我没有让它正常工作，但它正在形成我想要的方式。如果您可以将此作为答案发布，我可以接受。

【解决方案1】：

当您在地图初始化后操作任何地图的外部 div 时，就会发生这种情况。因此，要解决此问题，您必须在显示所有外部 div 后初始化地图。

所以只需在最后初始化地图：

$mapsOuterDivs.slideToggle(700);
setTimeout(function(){
    initializeGoogleMap();
},300);

【讨论】：

【解决方案2】：

使用

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

$("#map_canvas").css("height", $(window).height());

【讨论】：

【解决方案3】：

我发现唯一可靠的方法是使用display:block 的画布初始化地图，然后将其隐藏。如果这是在 $(function() {...}) 结构中完成的，那么您不应该在地图被隐藏之前看到它。

您也可以尝试最初隐藏画布，并在首次需要地图时在显示画布后初始化地图。

无论哪种方式，只有在其画布可见时才初始化地图。

【讨论】：