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

Question

我在嵌入的谷歌地图上遇到问题，我不明白为什么在加载 map 时不显示并且只在我调整窗口大小时出现，我在 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>

我的分区

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

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

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

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

Answer 1

当您的“div id=map”可见时，调用 google.maps.event.trigger(map, 'resize')。请看How do I resize a Google Map with JavaScript after it has loaded?