使用官方嵌入代码（最简单、最推荐）
这是谷歌官方提供的方法,最简单快捷，适合绝大多数静态展示需求，它会生成一个 <iframe> 标签，直接将地图嵌入你的网页。
（图片来源网络，侵删）
优点：
- 无需编程知识： 只需复制粘贴。
- 操作简单： 通过可视化界面即可完成。
- 官方支持： 稳定可靠。
缺点：
- 定制性差： 难以深度自定义地图的交互和样式。
- 加载性能：
<iframe>有时会比原生 JavaScript 加载稍慢。
详细步骤：
第1步：找到谷歌地图嵌入页面
- 打开谷歌地图,搜索你想要展示的地点（你的公司地址、景点等）。
- 在搜索结果下方,点击“分享”按钮。
- 在弹出的菜单中,点击“嵌入地图”。
第2步：自定义地图并获取代码
（图片来源网络，侵删）
-
在弹出的窗口中,你可以对地图进行一些基本设置：
- 调整大小： 拖动滑块选择你想要的尺寸。
- 选择视图： 可以选择“小地图”、“中等”或“大地图”。
- 隐藏缩放控件： 勾选此项可以隐藏地图右下角的 +/- 缩放按钮。
- 启用用户缩放： 勾选此项允许用户通过鼠标滚轮或双指来缩放地图。
-
自定义完成后,复制
<iframe>下方的代码。
第3步：将代码粘贴到你的网站
将复制的代码粘贴到你网站 HTML 文件的 <body> 标签内你想要显示地图的位置即可。
（图片来源网络，侵删）
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">我的网站</title>
<style>
/* 给地图容器设置一个高度，否则地图可能无法显示 */
.map-container {
width: 100%;
height: 400px; /* 你可以根据需要调整高度 */
border: 0;
}
</style>
</head>
<body>
<h1>欢迎来到我们的公司</h1>
<p>我们的地址如下，欢迎您的光临！</p>
<!-- 在这里粘贴你复制的 iframe 代码 -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.9663095343008!2d-73.98656708459418!3d40.74844097932847!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1635959228482!5m2!1sen!2sus"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</body>
</html>
注意： 现代网页开发中，更好的做法是使用一个 <div> 作为容器，然后将 <iframe> 放入其中，并通过 CSS 来控制容器的大小，如上面的 .map-container 示例所示。
使用 Google Maps JavaScript API（最灵活、最强大）
如果你需要对地图进行深度定制,例如添加标记、绘制路线、监听点击事件、自定义样式等，就必须使用 JavaScript API。
优点：
- 高度可定制： 完全控制地图的每一个细节。
- 功能强大： 可以实现复杂的交互功能。
- 无缝集成： 可以将地图与你的网站数据动态结合。
缺点：
- 学习成本： 需要一定的 JavaScript 知识。
- 需要 API Key： 必须申请谷歌的 API 密钥。
- 可能产生费用： 超出免费额度后会按量收费（目前每日有高额免费额度）。
详细步骤：
第1步：获取 Google Maps JavaScript API 密钥
- 前往 Google Cloud Console。
- 创建一个新项目（或选择一个现有项目）。
- 在左侧菜单中,导航到 APIs & Services > Library。
- 在搜索框中搜索 “Maps JavaScript API”，然后点击它，并点击“启用”。
- 再次导航到 APIs & Services > Credentials。
- 点击 + CREATE CREDENTIALS，然后选择 API key。
- 系统会自动生成一个 API 密钥。请立即复制并妥善保存它！
- （重要）为了安全，最好限制 API 密钥的使用范围，点击“编辑 API key”，在“API restrictions”中，只允许“Maps JavaScript API”使用这个密钥。
第2步：在你的网站中加载 API
在你网站的 HTML 文件中，通过 <script> 标签加载 Google Maps JavaScript API，并附上你的 API 密钥。
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&language=zh-CN®ion=CN">
</script>
YOUR_API_KEY: 替换成你自己的 API 密钥。callback=initMap: 指定地图初始化完成后要执行的 JavaScript 函数名。language=zh-CN: 设置地图的语言为中文。region=CN: 设置地图的地区为中国，有助于显示更准确的地名。
第3步：创建地图容器和初始化地图
在你的 HTML 中创建一个 <div> 元素作为地图的容器，并为其设置 id，然后编写 JavaScript 代码来初始化地图。
完整示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">使用 JavaScript API 的地图</title>
<style>
/* 确保地图容器有明确的高度和宽度 */
#map {
height: 100%;
width: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>我们的动态地图</h1>
<p>下面的地图是通过 JavaScript API 创建的。</p>
<!-- 地图容器 -->
<div id="map"></div>
<!-- 加载 Google Maps JavaScript API -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&language=zh-CN®ion=CN">
</script>
<script>
// initMap 函数将在 API 加载完成后被调用
function initMap() {
// 地图的中心点坐标（北京天安门）
const beijing = { lat: 39.9042, lng: 116.4074 };
// 创建一个地图实例
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12, // 缩放级别
center: beijing, // 中心点
// 可选：设置地图类型
mapTypeId: "roadmap"
});
// 创建一个标记
const marker = new google.maps.Marker({
position: beijing,
map: map,
title: "北京天安门" // 鼠标悬停时显示的文字
});
}
</script>
</body>
</html>
使用第三方插件（适用于 WordPress 等CMS）
如果你使用的是像 WordPress 这样的内容管理系统，有大量现成的插件可以让你轻松插入谷歌地图，而无需编写代码。
优点：
- 极其方便： 通常只需在后台搜索、安装、激活插件，然后通过短代码插入文章或页面。
- 功能丰富： 许多插件提供了样式、标记、联系表单等高级功能。
- 用户友好： 界面直观，适合非技术人员。
缺点：
- 依赖插件： 网站的功能和性能受限于插件的质量。
- 可能影响速度： 一些臃肿的插件会拖慢网站加载速度。
以 WordPress 为例：
- 登录你的 WordPress 后台。
- 导航到 插件 > 安装插件。
- 搜索 “Google Maps” 或 “MapPress” 等关键词。
- 选择一个评价高、安装量大的插件（如 "MapPress Easy Google Maps"），然后点击“现在安装”和“启用”。
- 启用后,你可以直接在文章或页面的编辑器中使用插件提供的短代码，
[mappress mapid="1"]。 - 大部分插件也提供了可视化设置界面,让你在后台就能配置地图的样式、位置和标记。
总结与建议
| 方法 | 难度 | 灵活性 | 适用场景 |
|---|---|---|---|
| 嵌入代码 | ⭐ | ⭐ | 简单展示地址，个人博客，公司“联系我们”页面，快速实现。 |
| JavaScript API | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | 需要自定义标记、路线、信息窗口、动态数据交互的复杂应用。 |
| 第三方插件 | ⭐ | ⭐⭐ | WordPress 等 CMS 用户，希望快速、无代码地添加地图功能。 |
给你的建议：
- 如果你只是想在网站上展示一个地址，用 方法一（嵌入代码） 就完全足够了，这是最直接高效的方式。
- 如果你正在开发一个功能复杂的网站或 Web 应用，需要根据用户行为动态显示地图信息，那么学习并使用 方法二（JavaScript API） 是最佳选择。
- 如果你使用的是 WordPress，直接找一款靠谱的 方法三（插件） 能为你节省大量时间。
