如何在Bootstrap 3模态框中正确显示Google Map地图

问题修复方案 #

核心问题排查&修改步骤 #

1. 给地图容器设置固定宽高
   模态框内的地图容器默认没有尺寸，添加如下CSS规则即可：

#map {
  width: 100%;
  height: 400px;
}

2. 取消地图JS的自动初始化回调
   你当前引入谷歌地图JS的地址末尾携带了&callback=initMap，会在页面加载完成后自动执行初始化，此时模态框处于隐藏状态，地图无法正确计算容器尺寸，直接删掉这个参数即可，修改后的引入代码为：

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=你的密钥填在这里">
</script>

3. 恢复模态框显示事件的绑定，补全地图重绘逻辑
   你代码里的shown.bs.modal事件被注释了，取消注释后还要补全地图重绘、重新定位中心点的逻辑，避免地图偏移/只显示部分区域：
   首先提前在全局声明map变量，方便事件回调内访问：

// 在所有函数外添加全局变量声明
var map;

然后修改initMap内的地图实例化代码，把局部变量改为全局变量：

// 把原代码里的 var map = new google.maps.Map... 改成：
map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(-33.863276, 151.207977),
  zoom: 11
});

最后取消事件代码的注释，补全重绘逻辑：

$('#myModal_map').on('shown.bs.modal', function(){
  initMap();
  // 触发地图尺寸重算
  google.maps.event.trigger(map, 'resize');
  // 重新设置中心点，避免偏移
  map.setCenter(new google.maps.LatLng(-33.863276, 151.207977));
});

4. 修复代码内的未定义变量错误
   你代码里有一行var icon = customLabel[type] || {};，其中type变量没有定义，需要从marker属性中读取，在对应位置添加一行代码即可：

// 在var icon = ... 之前添加这行
var type = markerElem.getAttribute('type');
var icon = customLabel[type] || {};

按照以上步骤修改后即可正常在模态框中加载谷歌地图。

内容的提问来源于stack exchange，提问作者Nancy Moore