如何在网站上添加谷歌地图?

昨天更新了关于我的页面,在页面上插入了谷歌地图,后续如果换了地方会及时的将网站上这个地方更新。我也是看到别人分享了下方法,就实践了下发现比较简单。

插入谷歌地图一般都是电商站会去做或者是 ToB 的网站才会插入,插入谷歌地图也是一种增加信任感的一种方式。

这里主要分享两个方法,对于 Api 方法就不分享了。只要能完成插件地图,能最简单就简单,当然复杂的方法有复杂方法的好处。

第一种: 通过 HTML 插入

首先来到谷歌地图的官网,搜索你想要插入在网站的地址,一般是公司的地址或者是你自己住的地址。比如深圳梧桐山,当然你可以输入的更加的详细。

梧桐山

搜索出来之后点击地址,然后就会有一个分享的按钮,点击分享,然后会有两个选项发送链接和嵌入地图,点击嵌入地图,之后就会出来 HTML 代码,这里你还可以选择尺寸的大小。

梧桐山分享

然后来到你的网站的后台点击,右上角的蓝色加号,搜索自定义 HTML,插入到输入框,然后将这段复制好的 HTML 代码粘贴上去,然后你就点击预览了。这里预览的作用就是为了就看下尺寸,如果尺寸不合适的话,可以去谷歌地图的官网上去调整,也可以直接在 HTML 代码上修改宽和高。

嵌入地图代码

谷歌地图代码

以上就是通过插入 HTML 代码的方式将谷歌地图插入到网站的基本的方法。这样的方法还是很简单的,不需要安装任何的其他的插件。

对于你自己的wordpress网站来说能少安装插件就少安装插件。

这种方式是需要古登堡编辑器的。我用的网站主题是 GeneratePress ,所以能很方便的插入。

第二种:安装的是 Elementor 编辑器

Elementor 编辑器有好处有坏处,Elementor 能将你建站的流程搞的非常简单,它是拖拽型有很大的自由度;坏处的话就是它体积比较大,对网站的速度影响很大,在之前的文章也写过。

Elementor 使用的人很多,尽管会拖慢速度,但是只要优化的好,这些都不是问题,它这么大的安装量足以说明它的优势,它能使用的功能更多。今天主要是写下怎么用 Elementor 在你的网站上插入谷歌地图。

用 Elementor 插入谷歌地图也是有两种方法第一种就是上面的这种也是插入 HTML 代码,获取到你地址详细的 HTML 代码流程和上面的是一样的。

elementor 元素

第二种是在搜索框搜索 maps 就能出来谷歌地图的图标。点击就能添加到你想添加到的位置上,然后就是将你想要展现的地址填入就可以。这种方式比较简单,只需要你输入地址,不需要你去找你地址的 HTML 代码,如果你是用的 Elementor 的编辑器,推荐用这种方式。

谷歌maps setting

以上就是在你的 WordPress 网站上插入谷歌地图的方法。

发表评论