Google Maps JavaScript API密钥配置需新建项目、启用Maps JavaScript API、设HTTP referrers限制（含localhost/*及域名），密钥勿硬编码；script须带callback=initMap且initMap为全局函数；地图容器必须设固定height，否则白屏。
Google Maps JavaScript API密钥怎么配才不报错
没密钥或密钥配置不对，地图直接空白，控制台抛 Google Maps JavaScript API error: InvalidKeyMapError 或 MissingKeyMapError。这不是前端代码问题，是权限和配额没过。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 去 Google Cloud Console 新建项目（别用默认项目，避免权限混乱）
- 启用
Maps JavaScript API（不是 Static Maps 或 Geocoding —— 即使你只显示地图也必须开这个） - 创建 API 密钥，**立即设置应用限制**：选 “HTTP referrers”，填
localhost/*和你的域名（如example.com/*），不能留空 - 密钥生成后复制，**不要在 HTML 里硬编码**；开发阶段可临时放 script 标签里，但上线务必通过环境变量或后端注入
加载地图的 script 标签顺序和 async 处理
脚本加载顺序错、async 用得莽撞，会导致 google is not defined 或 initMap is not a function。Google Maps API 不是标准 ES 模块，它依赖全局回调机制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"></script>——callback参数必须存在且函数名拼写完全一致 -
initMap必须是全局函数（不能在document.addEventListener('DOMContentLoaded', ...)里定义，也不能用const initMap = () => {...}） - 如果页面已用模块化（如 ES6 import），把地图初始化逻辑抽成独立
<script>块，放在 API script 之后，且不加type="module" - 调试时可临时去掉
async defer，确保加载顺序可控
地图容器 div 没尺寸导致白屏
这是最隐蔽也最高频的问题：HTML 里写了 <div id="map"></div>，但没设宽高，结果地图渲染区域为 0×0，看起来就是一片空白，控制台却无报错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须给地图容器显式设置 CSS 尺寸：
#map { height: 400px; width: 100%; }——height不能是auto或百分比（除非父元素有固定高度） - 若地图在 tab 切换后才显示，需手动触发
google.maps.event.trigger(map, 'resize')，否则中心点偏移、控件错位 - 响应式场景下，监听
window.resize并调用map.setCenter()重设中心不是必须的，但resize事件触发一次是必要的
添加标记（Marker）后点击没反应？检查 infoWindow 绑定方式
标记能显示，但点击弹不出气泡，大概率是 infoWindow.open() 调用时机或作用域错了 —— 它必须在 marker 实例创建后绑定，且每次 open 都要传入 map 和 marker。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要在 for 循环里直接写
marker.addListener('click', () => infoWindow.open(map, marker))，闭包会捕获最后一次循环的marker，所有标记点开都显示同一个内容 - 正确写法：用
(function(m) { m.addListener('click', () => infoWindow.open(map, m)); })(marker)，或用let声明循环变量（ES6+ 环境） -
infoWindow内容支持 HTML 字符串，但不要塞大段样式或 script；复杂交互建议改用自定义 overlay 或外部 modal - 移动端注意：
click在 iOS Safari 上可能延迟，可加mousedown双绑，或启用gestureHandling: 'cooperative'避免误触缩放
map.setOptions({}) 的文档，少猜。 
