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

问题描述

我将Google Map放在div中，并在slide上进行了一次toggle切换. 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>

推荐答案

您可以通过添加idle的事件侦听器，等到地图加载完毕.地图完全加载并准备就绪后，将触发此事件.

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:none.

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 Map API无法正确显示jQuery slideToggle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！