Google 地图 API 无法正确显示 jQuery slideToggle答案

【问题标题】：Google map API doesn't display correctly jQuery slideToggleGoogle 地图 API 无法正确显示 jQuery slideToggle
【发布时间】：2013-08-23 02:19:20
【问题描述】：

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

当 div 展开后，它看起来不像下面的地图

请查看jsFiddle Sample

上的代码

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

【问题讨论】：

jQuery SlideToggle Google Maps Issue的可能重复

标签： javascript jquery google-maps-api-3

【解决方案1】：

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

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

这是JSFiddle。

编辑：

对于任何有类似问题的人，here is the updated JSFiddle 地图位于屏幕外，因此它在不使用 display:none 的情况下保持隐藏。

【讨论】：

谢谢！地图必须先加载？因为页面在第一次打开时看起来有点奇怪。
是的，不幸的是，如果它有display:none，则不会加载标记。但是，可能有一种方法可以通过定位隐藏它，这样您就不必一开始就看到地图弹出，您可能想查看这个答案：stackoverflow.com/a/4700611/1091751。
我不太明白那个答案，我不认为 position: absolute; left: -10000px; 与 slideToggle 一起使用？那正确吗？谢谢
离屏是一个不错的解决方案。谢谢！

【解决方案2】：

你需要等到地图完成渲染然后你设置隐藏地图因为当 div 隐藏时地图 div 被切换，这使得地图看起来位置错误 init 函数应该是这样的

function initialize() {
  var latlng = new google.maps.LatLng(48.89376,2.33742); 
    var settings = {
    zoom: 15,
      center: latlng,
      disableDefaultUI: true,
        zoomControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"), settings);
  var marker=new google.maps.Marker({
    position:latlng,
  });

  marker.setMap(map);

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

【讨论】：

感谢您的回答，但如果我启用“隐藏”，它就不起作用了。
感谢更新的答案，有一点问题，这真的取决于页面加载的速度。有没有更好的解决方法？