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

Question

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

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

请检查jsFiddle Sample上的代码

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

Answer 1

您可以通过为idle. 一旦地图完全加载并准备好，此事件将触发。

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

这是JSFiddle。

编辑：

对于任何有类似问题的人，这里是更新的 JSFiddle，地图位于屏幕外，因此它在不使用display:none.

Answer 2

您需要等到地图完成渲染然后设置隐藏地图，因为地图 div 在 div 隐藏时切换，并且使地图看起来错误的位置初始化函数应该如下所示

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();
  });
}