显示/隐藏时显示灰色区域的Google地图

Question

我遇到了这个问题：我在一个页面中有两张Google地图，只显示一次。一个显示用户选择的首选商店。如果用户想要选择另一个，则WebService提供最近的那个，并且使用该信息，我隐藏第一个地图（以及一些相关元素），创建另一个地图并显示它。

这是小提琴：

http://jsfiddle.net/Osoascam/ReSsM/2/

我有几个问题：

1. 直接调用Google Maps API（而不是通过google.load），有没有办法确定脚本何时完全加载，所以我没有遇到“google is not defined”错误？

2. 我正在做两张地图吗？传递对var currentMapId, searchMapId的引用？当我发送参考文献时，我认为它可能有用......它有效，但我觉得它有点愚蠢。我不知道是否只有一个参考是好的。

3. 尝试一遍又一遍地快速点击按钮，地图会移动并出现一个大的灰色区域。这对小提琴来说并不是什么大不了的事，但它在我的应用程序中，因为有时它会永远保持这种状态，即使用户拖动地图也是如此。这实际上是我最重要的问题，另外两个是关于代码组织和优化。我该如何解决？

4. 最后，我不知道这是不是我的印象，但是当你拖动地图时，它似乎会非常缓慢地加载地图。

注意：实际上我的第二张地图永远不会加载，但应用程序是如此之大，我仍然在测试它的原因。出于某种奇怪的原因，每当我调整浏览器大小时，地图就会开始加载。



提前致谢，

奥斯卡

Answer 1

我和你有同样的问题，我的布局非常复杂，而且我在页面上也有多个gmaps。我为解决这个问题所做的是改变z-index

我把一张地图包裹在像这样的容器上：

<div style="height:0px;overflow:hidden;z-index:-999;">
<div id="map" style="width: 520px; height: 400px"></div>
</div>

解决问题的方法，但我真的不知道为什么。我希望它有所帮助！ 祝你好运