Google地图Javascript API仅在控制台处于打开状态时加载数据

Question

我正在尝试在我的页面上显示一个地图，该地图设置了一个标记。

我的问题是什么

地图实例没有任何问题。控制台或谷歌自己都没有错误。但遗憾的是，地图数据未加载。我只是得到了Google徽标和灰色背景，如图所示。

然后，当我打开谷歌浏览器的控制台时，它会加载地图数据，并显示包含所请求地图类型的地图。

我尝试了什么

我在互联网上搜索，发现了其他一些问题，比如灰盒子，但解决方案对我没有帮助。

现在我的代码看起来像这样：

<div id="map" style="width:100%;height:400px;"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script>
<script>
function initMap() {
   //Just some example coordinates
   var lat = 47.8;
   var lon = 8.9
   var location = {lat: lat, lng: lon};
   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: location,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });
   var marker = new google.maps.Marker({
      position: location,
      map: map
   });
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>

有人可以帮助我吗？

Answer 1

它并不完美，但您可以尝试在加载地图时强制调整大小：

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

或者没有jQuery：

google.maps.event.addListenerOnce(map, 'idle', () => {
    const event = new Event('resize');
    window.dispatchEvent(event);
});

Answer 2

您不需要添加DOM侦听器。地图应该只加载这个脚本：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initMap">
</script>

和initMap函数。

编辑： DOM Listener正等着你去加载＆＃34;在加载地图之前，DOM等着你打开控制台。