javascript - 谷歌地图 API 无法正确显示 jQuery slideToggle

Question

我将 Google map 放入一个 div 中，并在该 div 上制作了一个 slideToggle。Google map 无法正确显示。

div 展开后，它看起来不像下面的 map

请查看 jsFiddle Sample上的代码

<div class="click">
  <div class="hide">
    <div id="map" style="width:300px;height:140px;"></div>
  </div> 
</div>

Answer 1

您可以通过为 idle 添加事件监听器来等待 map 加载完毕。一旦 map 完全加载并准备就绪，就会触发此事件。

google.maps.event.addListenerOnce(map, 'idle', function() {
    $('.hide').hide();
});

这是 JSFiddle .

编辑:

对于任何有类似问题的人，here is the updated JSFiddle map 位于屏幕外，因此无需使用 display:none 即可保持隐藏状态。