所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

如何在 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。

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

Google Map 嵌入地图 :选择商家位置,并点击经纬度
选择商家位置,并点击经纬度

选择“ 添加遗漏的地点 。

选择“ 添加丢失的地点 ”
选择“ 添加丢失的地点 ”

Step2:设定商店信息

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

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

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

Google Map 嵌入地图 :设定商店信息
设定商店信息

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

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

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

Google Map 嵌入地图 :点击更多功能
点击更多功能

前往你的贡献。

Google Map 嵌入地图 :点击“ 你的贡献 ”
点击“ 你的贡献 ”

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

Step4:复制地图程序码

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

Google Map 嵌入地图 :复制地图程序码
Google Map 嵌入地图 :复制地图程序码

Step5:贴入到 WordPress 页面

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

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

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

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

Google Map 嵌入地图 :切换浏览模式,调整地图宽度&高度
切换浏览模式,调整地图宽度&高度

Step5:网站地图出现啦!

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

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


2. 使用 Elementor Map 工具

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

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

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

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

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

Google Map 嵌入地图 :使用 Elementor 的 Google Map 工具
使用 Elementor 的 Google Map 工具

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

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

调整 Elementor 的 Google Map 设置
调整 Elementor 的 Google Map 设置

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

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

地图设定为全宽显示
地图设定为全宽显示

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

Google Map 嵌入地图 :将边距设为 0,预防留白边
Google Map 嵌入地图 :将边距设为 0,预防留白边

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

Google Map 嵌入地图 :使用 Elementor 嵌入 Google Map 成功!
使用 Elementor 嵌入 Google Map 成功!

以上就是使用 Elementor 页面编辑器,嵌入 Google Map 的方法:)


常见问题

如何在网站上嵌入 Google Map?

方法很简单,只要在 Google Map 将地标的程序码复制起来,并贴至 WordPress 网站中,就可以生效了。

或是有使用 WordPress 页面编辑器,像是 Elementor 之类的,也可以用内置的工具嵌入 Google Map。

网站上嵌入 Google Map 有什么好处呢?

主要是方便潜在访客找寻,用地图方式呈现,方便他们大致掌握商家的地点。

可以定制调整 Google Map 的宽度和高度吗?

可以的,文章内也有提到如何简单调整地图的宽度&高度,只要将数字依自己需求调整即可

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

0
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板