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

Question

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

一旦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。

编辑：

对于遇到类似问题的任何人here is the updated JSFiddle，地图位于屏幕外，以便在不使用display:none的情况下保持隐藏状态。

Answer 2

你需要等到地图完成渲染然后你设置隐藏地图 因为map 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();
  });
}