Google Map加载后显示灰色问题求助：Bootstrap 3修复代码无效

这种情况我之前帮好几个开发者排查过，确实和Bootstrap 3的布局特性脱不了干系——大概率是地图容器在初始化时没有正确的宽高尺寸，导致Google Maps API无法准确渲染地图瓦片，所以才会出现灰色区域；而窗口resize或者拖动时触发了地图的重绘逻辑，才让地图恢复正常。

你之前添加的修复代码没生效，大概率是时机不对，或者没有针对你的具体使用场景来绑定触发逻辑，下面给你分场景梳理正确的解决方法：

场景1：地图在Bootstrap标签页（Tab）中 #

默认非激活的tab面板是display: none状态，初始化地图时容器的宽高为0，API根本没法计算渲染范围。这时候要在tab切换到激活状态时，触发地图的resize事件：

// 监听tab切换完成的事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // 这里的map是你的Google Map实例，记得提前定义好
  google.maps.event.trigger(map, 'resize');
  // 可选：如果需要让地图回到初始中心点，记得先保存中心点坐标
  // map.setCenter(yourSavedCenterCoordinates);
});

场景2：地图在Bootstrap折叠面板（Collapse）中 #

和tab的问题类似，折叠面板未展开时容器是隐藏的，要在面板展开完成后触发resize：

$('.collapse').on('shown.bs.collapse', function () {
  google.maps.event.trigger(map, 'resize');
  // 同样可选：重置地图中心点
});

场景3：普通响应式容器（比如栅格布局） #

如果地图放在Bootstrap的col-*类容器里，可能因为页面加载时其他元素（比如图片）还没加载完成，导致容器尺寸未稳定。这时候可以：

1. 给地图容器设置明确的宽高（父容器也要有确定尺寸）：

#map {
  height: 400px; /* 固定高度，或者根据需求设百分比 */
  width: 100%;
}

2. 初始化地图后延迟触发resize，确保容器尺寸稳定：

// 先初始化地图
var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});
// 延迟100ms触发resize，给布局足够的渲染时间
setTimeout(function() {
  google.maps.event.trigger(map, 'resize');
  // 重置中心点，避免resize后地图偏移
  map.setCenter({lat: -34.397, lng: 150.644});
}, 100);

几个关键注意点 #

• 不要只依赖Bootstrap的栅格类给地图容器设置尺寸，一定要确保容器本身有明确的宽高（父容器也不能是height: auto）。
• 尽量避免在document.ready事件中直接初始化地图，如果页面有异步加载的内容，建议等window.load事件触发后再初始化，确保所有布局元素都加载完成。
• 如果你的自定义标记有显示问题，检查图标路径是否正确，但你提到其他功能正常，所以重点还是resize的触发时机。

按照上面的场景对应调整代码，应该就能解决地图灰色的问题了。

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