谷歌地图Javascript API仅在控制台打开时加载数据

我试图在我的页面上显示一个地图，它设置了一个标记

我有什么问题

map实例可以正常工作。控制台中没有错误，谷歌自身也没有错误。但不幸的是，地图数据没有加载。我只是得到了谷歌标志和灰色背景，你可以在图片上看到。

然后，当我打开GoogleChrome的控制台时，它会加载地图数据，并向我显示带有请求的地图类型的地图

我尝试的

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

现在，我的代码如下所示：

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

函数initMap（）{
//只是一些例子坐标
var lat=47.8；
var-lon=8.9
变量位置={lat:lat，lng:lon}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：8，
中心：位置，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var marker=new google.maps.marker({
位置:位置,，
地图：地图
});
}
google.maps.event.addDomListener（窗口'load'，initMap）；

---

有人能帮我吗？

您不需要添加DOM侦听器。映射应仅加载以下脚本：

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

以及initMap函数

编辑：

---

DOM侦听器正在等待您“加载”DOM，因此正在等待您在加载贴图之前打开控制台。

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

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

---

我不认为这是控制台，但事实是，当你打开控制台时，窗口会调整大小，因此它可能会触发一些强制重新绘制地图的事件。要尝试这一点，你可以在控制台已经打开的情况下重新加载你的页面（如果我是对的，地图将是灰色的）。啊，是的，好的，一定有调整大小的功能。如果控制台打开并且我重新加载它，它也将是灰色的。我能做什么？你能给我做个测试吗？将贴图的宽度更改为像素size@LucasTorres我试过了，但不幸的是结果是一样的。试着删除“异步延迟”好的，谢谢你的回答。但这并没有解决我的问题。谢谢。它通过AJAX命令加载。我用这个命令做什么？我更新了我的答案，所以现在加载地图时会触发超时，如果可以的话，你可以不用超时就试试。谢谢，它成功了。我删除了setTimeout，它就可以正常工作了。太好了，我会从答案中删除它！请参阅：或``以像素为单位指定尺寸将解决此问题