谷歌地图API的Javascript只加载数据，当控制台处于打开

我想显示我的网页，它只是设置了标记在地图上。谷歌地图API的Javascript只加载数据，当控制台处于打开

什么是我的问题

地图实例的工作没有任何问题。控制台或Google自己没有错误。但不幸的是，地图数据没有加载。正如您在图片上看到的那样，我只是获得了Google徽标和灰色背景。

然后，当我打开Google Chrome浏览器的控制台时，它会加载地图数据，并显示具有所需地图类型的地图。

我试过

我搜索在互联网上，发现了一些其他问题，如灰色框，但是该解决方案并不能帮助我。

现在我的代码如下所示：

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

有人能帮助我吗？

来源

2017-04-12 Julian Schmuckli

我不认为这是控制台，但事实上，当你打开控制台时，窗口会调整大小，因此它可能会触发某些强制重新绘制地图的内容。要尝试这一点，您可以在已打开控制台的情况下重新加载页面（如果我是正确的，地图将变为灰色）。 –

啊，是的，好吧，一定有东西与调整大小。如果控制台打开并重新加载，它也会变灰。我能做什么？ –

你能给我一个测试吗？地图的宽度更改为一个像素大小 –

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

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

来源

2017-04-12 10:23:58

谢谢。它通过AJAX命令加载。我该怎么用这个命令？ –

当在地图载入我更新了我的答案，让超时现在触发，如果正常，你可以尝试propably没有超时。 –

感谢它的工作。我删除了然后setTimeout，它只是工作。 –

你不应该需要添加一个DOM监听器。该地图应该只加载该脚本：

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

和initMap函数。

编辑： DOM Listener正在等待您“加载”DOM，因此正在等待您在加载地图之前打开控制台。

来源

2017-04-12 10:21:05

好的，谢谢你的回答。但它并没有解决我的问题。 –

谷歌地图API的Javascript只加载数据，当控制台处于打开

回答

相关问题