如何在 WordPress 网站嵌入 Google Map 地图，2 种方法介绍！

这篇文章，会跟大家分享如何在 WordPress 网站进行「Google Map 嵌入地图」。

搭建 公司品牌官网，或是有实体店面的电商网站，可能会有需要在网站上嵌入 Google Map 地图的需求。

而当我们在浏览网站时，有时也会看到某些商家用 Google Map 的方式呈现地理位置，相比用纯文字描述地址，也来的更加生动一些。

其实在 WordPress 网站 嵌入 Google Map 非常的简单，不需要用什么专业的技术，基本上新手小白也能顺利嵌入成功。

这篇文章会用简单的方法，跟大家分享如何操作。

• 1. 嵌入 Google 地图程序码
• 2. 使用 Elementor Map 工具
• 常见问题
• WordPress 学习资源

---

1. 嵌入 Google 地图程序码

这章节会跟大家分享，如何用嵌入程序码的方式，在 WordPress 嵌入 Google Map 地图。

Step1：标记商家地点

前往 Google Map，在你的商家大约位置点击地图，点击后会出现小地标的 Icon。

接着，会出现这个地点的经纬度，我们点击经纬度。

选择“ 添加遗漏的地点 。

Step2：设定商店信息

设定商店信息，像是商店名称、营业类别、实际位置等 ..。

点击展开按钮，会看到有更多的商店信息可以填写，像是营业时间、联络方式、网站路径等 ..。

可以的话会建议都填写完毕，这样对之后的商家SEO优化也会比较好，完成后点“ 传送 。

Step3：查询新增的地标是否被激活

接着，会需等待 Google Map 收录你新增的地标（时间长短不一定），你也能确认 Gmail 看是否有收到相关信件，里面也会标示目前的审核进度。

另外一个确认审核进度的方法，也可点 Google Map 左上角的更多功能 Icon。

前往你的贡献。

点击编辑就会看到刚提交的地标状态，但因为我这地标是随意输入的，所以如果你自己新增的地标已经审核通过，就可直接点击它。

Step4：复制地图程序码

那这边我就随意点击一个地点演示，点击分享>嵌入地图，然后“ 复制 HTML 。

Step5：贴入到 WordPress 页面

前往 WordPress 页面 > 全部页面，这边我示范添加到「 联络我们 」的页面上，你也可以依照自己需求添加到任一页面。 更多学习，如何新增页面。

新增自定义 HTML 元素，将刚复制的地图程序码贴入，因为默认的地图宽度比较窄，我们也能定制调整地图的宽度&高度。

下面是示范宽度 100%（全宽）、高度 450 px 的显示。

切换为预览模式，会看到刚复制的地图位置已经出现了，就可以将页面发布啰。

Step5：网站地图出现啦！

然后前往网站前台，我们看一下成果吧！ 太棒了，Google Map 顺利嵌入到 WordPress 网站里面了。

以上就是用嵌入程序码方式，将Goolge Map嵌入到网站中，这是最多人使用的一种方法，也不需要安装额外的插件。

---

2. 使用 Elementor Map 工具

WordPress 页面编辑器 是定制网页设计的好帮手，能用简单拖曳的方式就能制作页面，而其中最知名的就是 Elementor，安装启用数高达 500 万次以上。 更多 Elementor 教程。

Elementor 有内建 Google Map 的工具，只要输入地标名称，就能直接嵌入地图到网站中，非常的方便！

如果你也刚好有使用 Elementor，那这章节将会教你用更简单的方式处理。

首先，前往任何一个使用 Elementor 制作的页面，这里我同样用「 联络我们 」 页面作为示范。

选择「Google 地图 」工具，直接拖曳到想放置的地方。

在位置栏位直接输入你在 Google 设置的地标名称，Elementor 就会自动抓取所在位置。

「放大」栏位可调整地图内部显示的大小，「 高度 」是指地图的高度，都可依照自己需求设定。

如果打算将地图用全宽的方式显示，也能参考下面的作法。

选择「 段 > 版面配置 」，找到「内容宽度」并调成「全宽」即可。

但可能还是会发现周围有留白边，可点击「栏 > 进阶 」将「 边框间距 」都设成 0，应该就可以了。

完成后记得储存，就可前往 WordPress 前台看一下成果啦！

以上就是使用 Elementor 页面编辑器，嵌入 Google Map 的方法：）

---

常见问题

原文链接：https://www.itaoda.cn/blog/11581.html，转载请注明出处。