谷歌地图显示灰色屏幕而不是地图

Question

GoogleMaps显示为灰色框而不是地图。在Windows上调整大小，它可以正常工作 在窗口加载地图上显示如下：

窗口调整大小地图正常工作后

<div style="width:100%; height:400px; padding:0; margin:0; border:3px solid gainsboro; border-radius:3px;">
    <div id="canvas" style="width:100%; height:100%; padding:0; margin:0;"></div>
 </div>

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>
<script>
 var map;
 var latLong;
 $(window).load(function () {
    latLong = new google.maps.LatLng(47.0303105, 28.815481);
     map = new google.maps.Map(document.getElementById('canvas'), {
         center: latLong,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         zoom: 14
     });
            console.log("Map is ready.")
 });
</script>

PS Map在bootstrap模式div 中声明
感谢您的帮助。

Answer 1

Google家伙制作了特殊事件触发器，我在这种情况下使用它来阻止灰色地图：

google.maps.event.trigger(map, 'resize');

您需要在地图代码完成后拨打'resize'，或者稍微延迟一下。尝试在行console.log("Map is ready.")

之后插入此触发器