Javascript 谷歌地图显示后屏幕调整？

我在嵌入谷歌地图时遇到了问题，我不明白为什么加载时地图不会出现，而且只有在我调整窗口大小时才会出现，我在stackoverflow中使用了不同的解决方案，但它们对我不起作用

以下是我的js代码：

<script>
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 31.554606, lng: 74.357158},
          zoom: 14
        });
 google.maps.event.addListenerOnce(map, 'idle', function() {
               google.maps.event.trigger(map, 'resize');
            });
         } 
</script>

函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:31.554606，lng:74.357158}，
缩放：14
});
google.maps.event.addListenerOnce（map'idle'，function（）{
google.maps.event.trigger（映射，'resize'）；
});
} 

我的部门

当我加载应用程序时，它看起来像

在重新调整浏览器窗口的大小后，它看起来就像这样

---

请告诉我如何解决此问题？

当您的“div id=map”可见时，请致电google.maps.event.trigger（map，'resize'）。

---

请看

对我来说什么都不管用。我在引导中使用模型盒来加载地图。我什么都试了好几个小时。每次加载地图时，我都会看到一个灰色框，但只要调整浏览器的大小，它就会显示地图。似乎需要调整窗口的大小。因此，我将所有映射功能放入一个名为

initmap2（）

的函数中，并在其中显示新映射。点击一下我就用了

setTimeout( initMap2, 200 );

因此，一旦模式框打开，它就会显示地图，我试着将

100毫秒

工作，但我猜它在

200+毫秒

下工作，所以为了安全起见，我保留了

500毫秒

---

我希望这能有所帮助

我发现只有在结合了两件事后，这才有效：设置超时和谷歌调整大小

因此，在initMap的末尾，我设置：

google.maps.event.addListener(map, "idle", function(){
  google.maps.event.trigger(map, 'resize'); 
});

并为initMap创建一个setTimeout，如下所示：

$(document).ready(function(){
  setTimeout(initMap, 1000);
});

-- 编辑

回答@LucaC：我的initMap是一个单独的js，我链接到页面中。上述解决方案在本js中定义（仅限setTimeout）

但是，过了一段时间，我注意到这个问题仍然发生在移动设备上

解决方法：保留initMap的setTimeout，在我加载映射的页面上，我已经设置好了

$(window).load(function(){
 setTimeout(function(){
   google.maps.event.trigger(map, "resize");
 }, 250);
});

---

因此：我）延迟任何打破地图的事情；ii）最后，在页面加载后调整地图的大小：）

对我来说没有任何效果。我使用引导中的模态框来加载地图。我做了以下代码可能会帮助你

首先，我加载主体中的贴图，显示为：无，如下图所示

 <div style="display:none; overflow:hidden; width:100%; height:400px;" id="map"></div>

$('#modal-id').on('shown.bs.modal', function () {
    document.getElementById('map').style.display = "";
    var mapNode = map.getDiv();
    $('#map-modal').append(mapNode);
});

---

但愿它能工作。

在不使用javascript的情况下调整地图大小

第1步：进入谷歌地图，在搜索完你的位置后，点击分享和分享 嵌入谷歌地图 代码

第2步：代码将如下所示

<iframe src="/" width="600" height="450" frameborder="0" style="border:0" 
allowfullscreen></iframe>

<iframe src="/" width="600" height="450" frameborder="0" style="border:0" 
allowfullscreen></iframe>

<div class="map-responsive">
<iframe src="/" width="600" height="450" frameborder="0" style="border:0" 
allowfullscreen></iframe>
</div>

.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}

.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
} 


this will make your map responsive to any screen size.!!