Javascript 谷歌地图API没有'；无法正确显示jQuery幻灯片切换

我把谷歌地图放在一个div里，然后滑到div上。 谷歌地图显示不正确

一旦div扩展，它看起来就不像下面的地图了

请检查

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

---

您需要等待贴图完成渲染，然后设置隐藏贴图 因为当div打开隐藏时map div被切换，这使得map看起来位置错误 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();
  });
}

---

您可以通过为

idle

添加事件侦听器来等待映射加载。此事件将在地图完全加载并准备就绪后触发

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

这是我的建议

编辑：

---

对于任何有类似问题的人，如果地图定位在屏幕外，那么它将保持隐藏状态，而不使用

显示：无

可能重复感谢您的回答，但是如果启用“隐藏”，它将不起作用。感谢更新的回答，有一点问题，这实际上取决于页面加载的速度。有没有更好的方法来解决这个问题？谢谢！必须先载入地图吗？因为页面在第一次打开时看起来有点奇怪。是的，不幸的是，如果它有

display:none

标记将不会加载。然而，可能有一种方法可以通过定位来隐藏它，这样你就不必一开始就看到地图弹出，你可能想看看这个答案：。我不太明白这个答案，我不认为

位置：绝对；左：-10000px与
滑动切换一起工作
？是这样吗？感谢屏幕是一个很好的解决方案。谢谢