index.html中如何嵌入Google地图？-html教程-PHP中文网

最稳妥方式是用 iframe 嵌入 google 地图，无需 api 密钥、无配额限制、兼容性好；仅需在 google maps 中复制嵌入代码粘贴到 index.html 即可，适合静态页快速展示位置。

index.html中如何嵌入google地图？

直接在 index.html 中嵌入 Google 地图，最稳妥、兼容性最好、且不依赖构建工具的方式是用 <iframe></iframe>。它不需要 API 密钥、不触发配额限制、也不受跨域或 CSP 策略干扰——适合快速展示位置。

用 iframe 嵌入地图（推荐新手/静态页）

这是最快能出效果的方法，适用于企业官网、联系页等只需“显示一个位置”的场景。

打开 Google Maps，搜索目标地址（比如“Beijing Capital International Airport”）
点击右上角“分享” → 选“嵌入地图” → 复制生成的 <iframe></iframe> 代码
粘贴到 index.html 的里，例如：

<iframe src="https://www.php.cn/link/c7bb78561eac13b4c772f3996075b9e3/embed?pb=!1m18!1m12!1m3!1d227955.123...&output=embed" width="100%" 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 方式，避免全局污染和并发加载问题

示例片段（放在或底部）：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

<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></p><div id="map" style="height: 400px; width: 100%;"></div><p><script>
window.<strong>ib = () => {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: { lat: 39.57, lng: 116.29 },
});
};
</script></p>

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 末尾用引导加载器 + defer（确保 DOM 就绪后再初始化）

关键点其实就一个：别试图在 JS 模块里“控制” Google Maps 的加载时机。它不是普通库，它的生命周期由自身 loader 管理。你唯一能做的，是给它准备好容器、密钥、和稳定的执行环境。