Jquery 1.9.1，CSS＆amp; Google地图：“显示：无”问题

Question

我很难在我的网站上使用谷歌地图。问题是地图显示如下：

我理解的是在显示div之后重新调整对象大小的已知问题。 （已从display: none;更改为display: block;

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

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

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

还有其他方法吗？或者我是否必须为我的地图功能找到不同类型的布局？

Answer 1

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

您还可以尝试隐藏画布，并在显示画布后首次初始​​化地图。

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

Answer 2

使用

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

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

Answer 3

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

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

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