模态框中的Google Maps仅显示灰色，双击后才正常显示的技术问题

这个问题我碰到过好多次啦，本质是Google Maps初始化时没法获取到隐藏模态框容器的正确尺寸，导致地图只渲染了灰色区域；而双击操作刚好触发了地图的resize事件，让它重新计算了容器尺寸，才显示正常。另外你的代码里还有个小bug，咱们一起修复：

先看你代码里的问题 #

你把google.maps.event.addDomListener(window, 'load', initMap);放在了initMap函数内部，这意味着只有当initMap被调用后，这个监听事件才会被绑定，但页面加载完成时window.load事件就已经触发了，这时候initMap还没执行，监听根本没加上，地图的初始化时机完全不对。

修复方案（两种可选） #

方案一：推荐！模态框显示时再初始化地图（适合非默认显示的模态框）

如果你的模态框不是页面加载就显示的，最好等模态框真正显示、容器有了实际尺寸后再初始化地图，从根源避免尺寸问题：

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

// 监听模态框完全显示的事件
$('#myModal').on('shown.bs.modal', function () {
  // 如果地图还没初始化，先执行初始化
  if (!map) {
    initMap();
  } else {
    // 已经初始化过的话，触发resize重置尺寸，同时重置中心点（避免偏移）
    google.maps.event.trigger(map, "resize");
    map.setCenter(new google.maps.LatLng(44.5403, -78.5463));
  }
});

方案二：页面加载时初始化地图（适合必须提前初始化的场景）

如果一定要在页面加载时就初始化地图，那必须在模态框显示时强制触发resize并重置中心点，确保地图能正确适配容器尺寸：

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

// 把window加载监听移到函数外面，确保页面加载完成时触发初始化
google.maps.event.addDomListener(window, 'load', initMap);

$('#myModal').on('shown.bs.modal', function () {
  // 触发resize让地图重新计算容器尺寸
  google.maps.event.trigger(map, "resize");
  // 关键步骤：重置地图中心点，否则resize后中心点会偏移
  map.setCenter(new google.maps.LatLng(44.5403, -78.5463));
});

为什么要重置中心点？ #

触发resize事件后，Google Maps会重新计算容器尺寸，但原来的中心点位置可能会因为容器尺寸变化而偏移，所以必须手动重置一次中心点，保证地图显示的位置正确。

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