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

问题描述

我遇到了我正在嵌入的谷歌地图的问题，我不明白为什么在加载时地图不会出现，只有当我调整窗口大小时，我经历了不同的解决方案在stackoverflow，但他们不为我工作。

这是我的js代码：

 << ;脚本> 
函数initMap（）{
 map = new google.maps.Map（document.getElementById（'map'），{$ b $ center：{lat：31.554606，lng：74.357158}，
 zoom：14 
}）; 
 google.maps.event.addListenerOnce（map，'idle'，function（）{
 google.maps.event.trigger（map，'resize'）; 
}）; 
} 
< / script> 
  

我的div

 < div id =map>< / div> 
  

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

请告诉我如何解决这个问题？

解决方案

call google.maps.event.trigger地图，'调整大小'），当你的div id = map将可见。
请参阅

I'm having problems with the google map I'm embedding, I don't understand why on load the map not appears and only appear when I resize the window, I went through different solutions in stackoverflow but they don't work for me.

Here is my js code:

<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>

my div

<div id="map"></div>

when i load application it appears like

and after re size browser window it appears perfectly like this

kindly tell me how to fix this problem ?

解决方案

call google.maps.event.trigger(map, 'resize') when your "div id=map" will be visible.Please see How do I resize a Google Map with JavaScript after it has loaded?

这篇关于屏幕调整大小后谷歌地图显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！