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

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

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

请检查jsFiddle Sample上的代码

Answer 1

您可以通过添加idle事件侦听器来等待加载映射。 地图完全加载并准备就绪后，此事件将触发。

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

这是JSFiddle 。

编辑：

对于有类似问题的任何人， 这里是更新的JSFiddle ，地图位于屏幕外，所以它保持隐藏而不使用display:none 。

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