Google地图API无法正确显示jQuery slideToggle [英] Google map API doesn't display correctly jQuery slideToggle

问题描述

我把谷歌地图放在一个div里面，并把一个slideToggle放到div上。
Google Map无法正确显示。

I put Google Map inside a div, and made a slideToggle onto the div. the Google Map doesn't display correctly.

一旦div展开，它看起来不像下面的地图那么正确。

Once the div expanded, it doesn't look right like the map below

请检查 jsFiddle示例 的代码

Please check the code on jsFiddle Sample

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

推荐答案

您可以等到地图加载事件侦听器空闲。

You could wait until the map is loaded by adding an event listener for idle. This event will fire once the map is fully loaded and ready.

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

以下是 JSFiddle 。

编辑：

对于任何有类似问题的人，这里是更新的JSFiddle ，地图位于屏幕外，因此它保持隐藏状态而不使用 display：无。

For anyone with a similar problem, here is the updated JSFiddle with the map positioned offscreen so it remains hidden without using display:none.

这篇关于Google地图API无法正确显示jQuery slideToggle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！