谷歌地图显示灰屏而非地图

Question

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

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

<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：地图在一个引导模态框中声明。
感谢您的帮助。

- Vladlen Gladis

---

由于这更可能是一个渲染问题，请提供更多有关如何复制或最好的fiddle或plunk的详细信息。 - Tariq B.

对我来说，我忘记添加“缩放”选项了，而这是必需的。 - Ali Samie

Answer 1

谷歌的开发人员制作了特殊的事件触发器，我在这种情况下使用它来防止地图变灰。

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

在地图代码完成之后或稍有延迟，您需要调用'resize'。尝试在console.log("地图已准备就绪。")后插入此触发器。

- MysterX

---

感谢您的帮助，我在这里找到了答案：https://dev59.com/nmgt5IYBdhLWcg3w5hWr - Vladlen Gladis