最稳妥方式是用 iframe 嵌入 Google 地图，无需 API 密钥、无配额限制、兼容性好；仅需在 Google Maps 中复制嵌入代码粘贴到 index.html 即可，适合静态页快速展示位置。
直接在 index.html 中嵌入 Google 地图，最稳妥、兼容性最好、且不依赖构建工具的方式是用 <iframe>。它不需要 API 密钥、不触发配额限制、也不受跨域或 CSP 策略干扰——适合快速展示位置。
用 iframe 嵌入地图（推荐新手/静态页）
这是最快能出效果的方法，适用于企业官网、联系页等只需“显示一个位置”的场景。
- 打开 Google Maps，搜索目标地址（比如“Beijing Capital International Airport”）
- 点击右上角“分享” → 选“嵌入地图” → 复制生成的
<iframe>代码 - 粘贴到
index.html的<body>里，例如：
<iframe src="https://www.php.cn/link/c7bb78561eac13b4c772f3996075b9e3/embed?pb=!1m18!1m12!1m3!1d227955.123...&output=embed" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" ></iframe>
- 调整
width和height适配布局；加loading="lazy"可延迟加载，避免首屏阻塞 - 注意：
src中的 URL 已含坐标和缩放，无需额外配置；但无法自定义标记、事件或样式
用 Maps JavaScript API 初始化地图（需 API 密钥）
只有当你需要交互控制（如添加标记、监听点击、动态定位）时，才走 JS API 路线。它要求你有 Google Cloud 项目 + 启用计费 + 设置密钥限制。
- API 密钥必须带浏览器限制（HTTP referrer），否则会报
InvalidKeyMapError或白屏 - 脚本必须用
defer，否则可能因 DOM 未就绪而报document.getElementById("map") is null - 地图容器
<div id="map"></div>必须有明确宽高（CSS 中设height: 400px，不能只靠内容撑开） - 推荐使用官方引导加载器（bootstrap loader），而不是旧式
callback=initMap方式，避免全局污染和并发加载问题
示例片段（放在 <head> 或 <body> 底部）：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await(a=m.createElement("script"));e.set("key","YOUR_API_KEY");e.set("v","weekly");e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,n)=>r.add(f)&&u().then(()=>d[l](f,n))})({key:"YOUR_API_KEY"});</script>
<p><div id="map" style="height: 400px; width: 100%;"></div></p><p><script>
window.<strong>ib</strong> = () => {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: { lat: 39.57, lng: 116.29 },
});
};
</script>Vue/React 等框架中直接写 script 标签会失败
很多开发者在组件里用 import 或动态 document.createElement("script") 加载 Google Maps JS，结果控制台报 google is not defined 或 initMap is not a function —— 这不是代码写错了，而是 Google 的加载机制不支持按需/异步执行上下文。
- Google 的 loader 依赖全局
window.google和同步执行链，框架的模块隔离会打断它 - 即使把 script 放进
index.html，若没加defer，也可能因渲染顺序导致document.getElementById("map")返回 null - 真正可靠的方案只有两个：iframe（无脑可用），或在
index.html <head>末尾用引导加载器 +defer（确保 DOM 就绪后再初始化）
关键点其实就一个：别试图在 JS 模块里“控制” Google Maps 的加载时机。它不是普通库，它的生命周期由自身 loader 管理。你唯一能做的，是给它准备好容器、密钥、和稳定的执行环境。
