如何将 Google 地图嵌入您的网站

已发表: 2022-05-15

帮助客户或客户找到您的真实商店对于最大化您的面对面销售至关重要。 您可以使用 Google 我的商家将您的商家添加到 Google 地图。 但您也可以将谷歌地图嵌入您的网站——例如，您的联系页面。

这比听起来容易。

将 Google 地图嵌入网站是帮助消费者定位您的企业的一种简单方法。 每月有超过 1.5 亿用户访问 Google 地图，您希望利用这个用户群。 毕竟，这是寻找企业和公司的首选方式，无论您是客户、客户还是潜在员工。

嵌入谷歌地图，将谷歌地图嵌入网站

在本文中，我们将解释如何在网站中嵌入 Google 地图——无论是公司网站还是本地商店。

提升您的营销水平！ 立即安排免费咨询以通过 SEO 和 PPC 增加销售额！

如何在网站中嵌入谷歌地图

将 Google 地图嵌入网站有两种不同的方法：HTML 代码或 API 密钥。

使用 HTML 代码

谷歌地图在其系统中集成了“共享或嵌入地图”功能。 您在网站的 HTML 代码中使用地图的 HTML 代码在页面上创建指向 Google 地图的直接链接。

  1. 访问 google.com/maps。
  2. 找到您要嵌入的位置并选择它。
  3. 单击左上角菜单选项卡中的三个水平线。
  4. 选择“共享或嵌入地图”选项。

您可以使用分享链接在社交媒体（如 Facebook 或 Twitter）或其他兼容平台上发送或分享链接。
要将链接添加到您的网站，请单击“嵌入地图”选项卡。

  1. 在弹出菜单的左侧下拉选项卡中确定您希望地图的大小：小、中、大或自定义大小
  2. 选择“复制 HTML”选项，并将其粘贴到您网站的 HTML 部分。
  3. 您可以将地图放置在网页上的任何位置。 但是，嵌入地图即表示您同意遵守 Google 的服务条款。 您也无法访问嵌入式地图中的所有 Google 地图功能，例如实时交通信息。

推荐博客：增加销售额的 20 大开箱即用创意以及什么是 SEO？ 搜索引擎优化初学者指南。

使用 API 密钥嵌入 Google 地图

您需要精通编码才能实现此方法。

第 1 步：生成 API 密钥

  1. 转到 Google Cloud Platform 的 Google Maps 部分。
    （设置项目时，您需要启用 API）
  2. 在左侧菜单中，选择“凭据”。
  3. 单击“+ 创建凭据”。
  4. 从菜单中选择“API 密钥”，然后复制出现的 API（稍后您将需要它）。

第 2 步：创建代码以使地图正常运行

  1. 确定页面的地图样式代码。
    <风格>
     #map {宽度：100%;

    高度：400px；

    背景颜色：灰色；

    }

    </style>

  2. 使用您的业务坐标添加地图脚本。
    <脚本>函数 initMap() {

    var macc = {lat: <latitude>, lng: <longitude>};

    var map = 新的 google.maps.Map(

    document.getElementById('map'), {zoom: 15, center: macc});

    var marker = new google.maps.Market({position: macc, map: map});

    }

    </脚本>

第 3 步：将 Google 脚本添加到 HTML 文档中

  1. 将 API 密钥添加到下面的异步脚本中，替换“YOUR_API_KEY”。
    <脚本异步
    src=”https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap”>
     </脚本>
  2. 将脚本添加到 HTML 文档中即可完成。

您需要使用 initMap() 函数，因为 Google 需要它来初始化和添加地图加载位置。 在这个函数内部，它应该包含位置的纬度和经度。

完成后，您就可以准备好响应式地图供客户使用。

推荐博客：如何创建可转化的内容营销漏斗以及什么是文案？ 如何通过数字文案增加销售额。

为什么要将 Google 地图嵌入您的网站？

也许您有特定的目的要添加 Google 地图。 如果没有，这里有一些你应该在网站上嵌入谷歌地图的原因。

查找您的商店

所有本地企业都应优先考虑在其网站上嵌入谷歌地图。 谷歌地图的截图很有帮助，但它们提供的细节水平远不及完全可操作的嵌入式地图。 例如，客户可以滚动查看您的商店离他们家有多远。

能够找到您的商店将增加您的店内客流量、销售额和利润。 这是一种将您的在线形象与您的实际业务联系起来的简单方法。

推荐的博客：如何获得新 Shopify 商店的流量、发展业务的品牌意识战略理念以及适用于小型企业的 5 个有效在线营销理念。

为您的联系页面增加价值

列出地址是一回事，但您的客户只会前往谷歌地图并进行搜索。 我们有一条营销规则——尽量减少客户需要采取的步骤。 每一次额外的点击或搜索都会导致客户流失。

通过添加嵌入式 Google 地图应用程序，您可以为您的联系页面增加价值并节省您的客户时间。 如果您的业务有点偏离，这一点至关重要。

展示路线

一些企业愿意提供帮助。 如果您销售登山鞋或跑步上衣，也许您想推荐步行或跑步供您的客户尝试。 （这是一篇出色的博文。）没有比在 Google 地图中突出显示路线更好的方式来显示此类信息了。

推荐博客：什么是数字营销？ 营销中的数字基础知识、Google My Business 的好处以及如何为我的网站查找站点地图。

学习在网站中嵌入谷歌很简单

它看起来有点令人生畏。 但是，一步一步地阅读上述指南，您最终会得到一张完美嵌入的地图，供您的客户欣赏。 它既方便又实用，还能促进您的业务发展。 值得尝试 API 技术，因为它可以为您提供比其他选项更多的功能。

当然，如果你真的很苦恼，你可以随时联系专家来帮助。 我们有配置网站和嵌入谷歌地图的经验。 我们非常乐意提供帮助。