独立站必备技能:无需API在外贸网站插入谷歌地图google map详细教程

对于那些外贸企业想要在海外市场上扩展业务并进军跨境电商领域的人来说,一个有用的网站是非常必要的。在这个过程中,将谷歌地图集成到您的网站中,将为您提供一个更加专业和可信赖的形象。然而,由于谷歌服务在中国大陆地区存在访问限制,因此您可能需要寻找一种无需使用谷歌 API 的替代方案。在本文中,我们将介绍一种无需谷歌 API 的方法,可以让您在自己的网站上添加谷歌地图,从而为您的海外客户提供更好的服务和体验。

在谷歌地图中找到您的位置

在谷歌地图中搜索和定位您的位置是添加地图的第一步。您可以通过以下步骤完成此操作:

  1. 打开谷歌地图网站https://www.google.com/maps/   (需注意域名后缀,不能是google.cn)
  2. 在搜索栏中输入您的地址或地点,我们以香港迪士尼为例,直接搜香港迪士尼即可
    无需API在外贸网站插入谷歌地图google map详细教程
  3. 搜索到之后,点击左侧的工具栏里有一个share分享按钮
  4. 在弹出的分享对话框里,选择右侧的嵌入地图代码Embed a map,点击右侧的copy html复制代码到剪贴板中
    无需API在外贸网站插入谷歌地图google map详细教程

WordPress 网站中插入谷歌地图代码(Elementor编辑器)

如果您的网站使用 WordPress 平台,可以通过以下步骤将生成的地图嵌入代码添加到您的网站:

  1. 在 WordPress 后台中,创建一个新文章或页面。我们以wordpress的Elementor为例。
  2. 在文章或页面中找到您想要插入地图的位置,将一个Html模块拖入进去。
  3. 在Html Code代码框中粘贴前面复制的谷歌地图代码,这时网站页面里已经可以显示谷歌地图了。
  4. 从代码中找到两个默认的数值,一个是width宽度600,一个是height高度450,将这两个数值按自己的页面布局进行改动,如图,我们将宽度改成100%,高度改成650,与右侧表单对齐。

至此,我们已成功地将谷歌地图嵌入了wordpress网站中。

在WordPress默认编辑器插入谷歌地图

如果你没有使用Elementor编辑器,比如只用了wordpress默认的编辑器,仍然可以将生成的谷歌地图以嵌入代码的形式添加到页面。

我们以wordpress文章的编辑器为例。

1.进入wordpress自带编辑器,将模式切换到文本模式,将生成的谷歌代码复制到编辑器中。

2.将编辑器切换回可视化视图模式

3.根据页面情况调整地图的宽度和高度。

4.预览前台效果

非wordpress网站嵌入谷歌地图的方法

如果您的网站不是基于 WordPress 平台,您仍然可以将生成的地图嵌入代码添加到您的网站。以下是一些基本步骤:

  1. 打开您的网站的 HTML 文件,并找到您想要插入地图的位置。
  2. 将先前复制的嵌入代码粘贴到该位置。
  3. 保存您的 HTML 文件,并在浏览器中预览您的网站,以确保地图正确显示。

谷歌地图搜不到自己的地点怎么办?

如果您在谷歌地图搜不到自己的位置,并不代表无法嵌入谷歌地图,下面是针对这种情况的设置方法。

  1. 第一步与平常添加一样,打开谷歌地图,通过拖拽的方式在地图上确认你所在的位置
  2. 点击确认好的位置,可以看到有一个灰色的小图标,下图注1,在页面底部会产生当前位置的坐标,点击坐标数值。
  3. 剩下的步骤与前面正常操作都一样,点击share分享,然后复制代码到页面就可以。

总结

这种方法在自己的网站中添加谷歌地图简单易用、无需申请API密钥、并且可以在不限制地图数量的情况下随意添加地图。对于外贸企业出海从事跨境电商的独立站来说,增加谷歌地图可以帮助客户更直观地了解公司所在地、附近的设施和区域情况,提高用户对公司信任度和满意度,从而提高网站的转化率和竞争力。

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Back to top button