模态中的谷歌地图仅显示灰色，双击后会显示

Question

Javascript：

<script type="text/javascript">
var map;
function initMap() {
var mapCanvas = document.getElementById('gmap_basic');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8
}
map = new google.maps.Map(mapCanvas, mapOptions)
google.maps.event.addDomListener(window, 'load', initMap);
}
$('#myModal').on('shown.bs.modal', function () {
google.maps.event.trigger(map, "resize");
});
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key='YOUR KEY'&callback=initMap"></script>

.CSS

#gmap_basic {
height: 300px;
width: 400px;
}

.html

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="gmap_basic"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<a class="btn btn-default" data-toggle="modal" data-target="#myModal">Map</a>

在控制台和网络中运行时没有错误，但模式中仅显示灰色。双击后，地图显示，但仅全屏选项...(缩放选项和卫星选项未显示(。

Answer 1

很可能发生这种情况resize因为从未触发过该事件，请尝试将其包装在 .ready()函数来确保在加载 DOM 后触发shown.bs.modal事件，如下所示：

$(function () {
$('#myModal').on('shown.bs.modal', function () {
google.maps.event.trigger(map, "resize");
console.log('resize');
});  
});

谷歌地图的加载方式还有另一个问题。 由于映射是通过callback参数初始化的，因此此行：

google.maps.event.addDomListener(window, 'load', initMap);    

这里不需要。

演示