使用地图位置 WordPress 插件托管详细的谷歌地图

已发表: 2023-03-30

您知道可以在 WordPress 网站上托管交互式 Google 地图吗?

您可能已经知道,只需将 iframe 代码复制到 HTML 块中,即可在任何页面或帖子中嵌入 Google 地图。 这将显示您指定的任何区域的地图。 然而,这是 HTML 嵌入方法的限制。

如果您想在您的 WordPress 网站上将 Google 地图位置提升到另一个级别,请留下来,因为我将在本文中向您展示具体的操作方法。

但首先,在您的网站上托管 Google 地图有哪些潜在用途?

其一,您可以用图钉显示您公司的位置。 或者,如果您正在计划一个活动,您可以在活动页面上显示确切的位置,以便访问者可以轻松地提前计划。 假设您有一个旅游网站,可以向游客介绍特定城市的最佳博物馆。 或者您可以显示徒步旅行路线并允许用户输入他们自己的徒步旅行笔记?

您可以使用 Creative Minds 的 Map Locations WordPress 插件来完成所有这些工作。 让我们开始吧!

使用地图位置插件创建独特的地图

使用 Map Locations 插件,您可以在 Google 地图上放置多个位置以及有关该位置的特定信息——加上图像、视频、邮政编码路线和可搜索标记。

使用 Google 地图集成,您可以使用多个地图创建一个商店定位系统,创建一个交互式位置目录。 该插件还允许您为每个位置显示一个独特的图标。

Cm 地图位置插件 WordPress 页面的屏幕截图

此外,该插件还支持:

  • 导入和导出位置
  • 通过邮政编码搜索位置
  • 使用简码嵌入位置
查看地图位置

地图位置 WordPress 插件入门

地图位置插件具有完整的设置菜单,并在您的 WordPress 管理仪表板上托管易于访问的用户指南。 配置和设置地图有几个重要步骤。 首先是在您的网站上安装插件。

安装地图位置插件

您可以在其 WordPress.org 页面上找到并下载地图位置插件。 或者,您可以在插件→添加新下的仪表板中搜索“cm map locations”。

您还可以在 Creative Minds 网站上购买该插件的高级版本之一。

安装并激活后,您会在左侧仪表板菜单中找到一个名为“CM 地图位置”的新菜单项。

配置插件的第一步是输入您的 Google Maps API 密钥。 如果您还没有,我们现在就来了解一下。

获取谷歌地图 API 密钥

首先,您需要一个 Google 帐户。 自 2018 年 7 月起,使用 Google 地图、路线和地点数据还需要您在 Google Cloud 中拥有账单信息。 但是,您将有机会在创建 API 密钥时添加该信息。

CM Map Locations→Settings下,您会找到 API 密钥字段和获取它的链接(如果您还没有的话)。

地图位置菜单的屏幕截图

您将需要几个 API 密钥才能使用地图位置插件:

  • JavaScript API
  • 地理定位 API(对于某些功能;需要 HTTPS)
  • 地理编码API
  • 地点 API

要获取这些密钥,请前往 Google Developers 页面。

导航到您的项目,或创建一个新项目。

Google Developer 项目菜单的屏幕截图

接下来,导航到APIs & Services→Library

从列表中选择一个 API,或使用搜索栏查找我之前提到的 API 之一。 在 API 的弹出菜单中,单击蓝色的启用按钮。 对每个 API 重复这些步骤。

启用所有 API 后,您需要获取密钥(您只需要一个)。 在边栏中,选择 Credentials,您会在其中看到列出的 API 密钥。 将 API 密钥复制到剪贴板 — 稍后您会将其粘贴到您的网站中。

首先,如前所述,您需要为 Google Cloud 启用计费。 这是 Maps Location 插件正常运行的重要一步。 登录到您的项目后,单击左上角的汉堡菜单并选择计费。 您会收到一条消息,提示您关联一个计费帐户。 单击该按钮并按照提示进行操作。

现在您已经完成了设置和获取 Google API 密钥的所有步骤,请返回您的 WordPress 网站。 在 CM 地图位置设置页面中,粘贴您的 Google 地图 API 密钥并单击底部的保存。 如果愿意,您可以使用右侧的按钮测试配置。

添加位置

地图位置插件为访问者和用户创建索引页面。 添加位置后,它将列在这些页面上。 在添加位置之前,最好为您的地图至少创建一个类别。

这就像添加一个新的帖子类别一样简单,但这些是特定于地图位置的。 在CM Map Locations→Categories下创建尽可能多的类别。 您还可以为每个类别添加默认标记图标。

地图位置菜单的屏幕截图

创建类别后,您可以添加位置。 您可以使用 CM Map Locations 菜单或单击管理工具栏中的+ New并选择Location 。 在新的位置页面编辑器中,填写与您所需位置相关的位置名称和描述字段。

从列表中选择适当的类别,然后选择一个标记图标。 如果您愿意,也可以上传自己的图标。 接下来,您可以添加关于您所在位置的任何图像或视频——这对于旅游指南网站来说会派上用场。

接下来,向下滚动到页面上显示的 Google 地图。 搜索位置或根据需要移动地图。 当您看到您的位置时,选择一种绘图工具并在地图上绘制您的位置边界。

在 Google 地图上创建地图位置的屏幕截图

进一步向下滚动页面,您会看到自动填充的准确的纬度、经度和您所在位置的地址信息。 如果你喜欢,你可以添加:

  • 电话号码
  • 网站
  • 电子邮件地址
  • 网址

单击“保存”按钮,您的位置将添加到您网站上可用的位置列表中。 查看位置时,您的访问者将看到格式整齐的信息和地图。

显示的圣巴巴拉地图的屏幕截图

创建索引页

索引页面的目的是显示带有代表不同位置的标记的地图,以及这些位置的可自定义列表。

索引页面可以配置为显示有关每个位置的不同信息,例如:

  • 标题
  • 描述
  • 地址
  • 评分。

用户可以与地图和位置列表交互以搜索特定位置或浏览所有可用选项。

索引页面还可以包括邮政编码半径过滤器等功能以及向每个位置添加自定义 URL 或方向的功能。

使用简码显示地图

短代码是特定于 WordPress 的快捷方式,允许用户向帖子和页面添加动态功能,例如带有位置的地图。

存在不同的简码用于各种目的,包括显示位置的片段、显示地图上的特定位置、显示具有来自类别的位置的地图以及显示当前位置地图。

用户可以添加参数以使这些短代码更加具体,例如选择地图的主题、宽度和高度或限制显示的位置数量。

下面是所有短代码及其参数的列表,以及示例,以便于理解:

位置简码:

  1. 片段
    • 简码:[cmloc-snippet]
    • 使用:显示位置的片段。
    • 过滤参数:id
    • 查看参数:特色
    • 示例:[cmloc-snippet id=”487″ featured=”map”]
  2. 具体位置图
    • 简码:[cmloc-location-map]
    • 用途:在地图上显示特定位置。
    • 过滤参数:id
    • 查看参数:theme、mapheight、mapwidth、width、showtitle、showdate
    • 示例:[cmloc-location-map id=1767 mapwidth=640 mapheight=480 width=700 showtitle=1 showdate=1]
  3. 多地点地图
    • 简码:[cmloc-locations-map]
    • 使用:显示带有所选类别位置的地图。
    • 过滤参数:showonlybyparams、limit、page、category、taxonomy_key
    • 查看参数:theme, list, mapwidth, width, menu, tooltip, map, usertracking, from_date, to_date
    • 获取参数:bgcolor, bgcolor_filter, time, time_filter, identifier, identifier_filter, from_date, to_date, hours, path
    • 示例 1:[cmloc-locations-map category=”mountains”]
    • 示例 2:[cmloc-locations-map list=left limit=4 page=1 category=”111″]
  4. 当前位置地图
    • 简码:[cmloc-current-locations-map]
    • 使用:显示当前位置地图。
    • 过滤参数:limit、page
    • 查看参数:theme、mapwidth、width、tooltip
    • 样本:[cmloc-current-locations-map]

可以在“简码”选项下找到简码以供参考。

可用的简码

您可以在 CM Map Locations 知识库的帮助文档中找到有关设置简码和使用简码显示位置的详细说明。

访问控制

如果您想让您的地图具有交互性,您需要在CM 地图位置菜单中配置访问控制。 有多个选项可供访问。

访问设置允许管理员控制谁可以查看、查看、创建和更新位置,以及哪些角色可以在上传图像时使用媒体库。

管理员可以从预设选项中进行选择,例如每个人、登录用户或特定用户角色,例如管理员、编辑、作者、贡献者或订阅者。

或者,他们可以创建一个自定义角色并列出允许访问它的人的能力名称。

列出位置

这允许您指定谁可以访问位置索引并搜索或过滤位置。

查看位置

这决定了谁可以显示该位置的页面。

创建位置

选择谁可以创建位置。

更新自己的位置

选择谁可以更新位置。

允许使用媒体库的角色

如果订阅者具有 upload_files 功能,他们可以在为某个位置上传图像时看到 WordPress 媒体库选项卡。 如果您想阻止用户搜索您网站的媒体库,请确保撤销特定角色的访问权限。

对于每个类别,您可以从 WordPress 核心中包含的任何默认角色或指定特定角色的插件提供的角色中进行选择。

附加功能

我已经介绍了设置和使用地图位置插件的基础知识,但还有更多功能可用。

主题

最多有六个主题可供选择,使您的地点在您的网站上脱颖而出。

瓷砖/层

图块或图层是地图的一部分,它与地图的其余部分分开生成和显示。

这些图块或图层通常是预先渲染并缓存在服务器上的方形图像,使它们能够快速显示在地图上,而无需用户的浏览器一次加载整个地图。

瓦片或图层用于通过允许在基本地图顶部显示附加信息来增强地图的视觉呈现。 这可以包括标签、标记和其他数据,可以帮助用户导航地图并了解所显示区域的上下文。

此外,图块或图层还可以通过允许浏览器仅加载当前可见的地图部分而不是一次加载整个地图来提高地图的性能。

您可以使用 OpenStreetMap 或其他服务在地图上添加图层以显示交通周期等信息。

地图上的图块叠加示例
地图上的图块叠加示例

这些设置位于“地图”部分下的“常规”选项卡中。

  • 默认地图视图– 选择默认视图。 用户可以随时更改此设置。
  • 插入磁贴 URL – 添加您选择的磁贴服务的 URL。 检查 Tiles – OpenStreetMap Wiki 以获取更多示例
在地图上设置图块和图层
在地图上设置图块和图层

允许访问者在浏览地图时打开或关闭图块。

选择“图块”按钮以显示或隐藏图块
选择“图块”按钮以显示或隐藏图块

您甚至可以允许用户上传图块。

显示用户位置

您的用户可以共享他们的地理位置并将其显示在地图上。

休息/API 支持

使用 REST API 从其他网站甚至移动应用程序创建位置。

显示模板

有多种可用的显示模板,可让您轻松创建商店定位器、列表或兴趣点。

按半径搜索

您可以从任何国家/地区的邮政编码搜索定义的半径。

位智和谷歌方向

当您创建新位置时,Wave 和 Google 方向链接会自动添加到列表中。

地图位置插件的定价

您可以在任意数量的 WordPress 网站上免费安装和使用地图位置插件。 它包括您创建任意数量的位置、添加描述和图像以及在其独特的地图上显示每个位置所需的所有要素。 但是,通过购买高级版本,您可以获得更多功能。

基本(专业)地图定位 = 39 美元/年

除了上面列出的基本要素外,您还可以在一个网站上获得显示模板、导入/导出、类别支持、天气信息、访问控制等。

高级地图定位 + 路线管理器捆绑包 = 69 美元/年

这一层添加了 Creative Minds 的 Route Manager 插件并将许可证扩展到三个网站。

终极地图位置 + 地图路线 + 5 个附加组件 = 119 美元/年

Ultimate 层添加了几个附加组件和 Map Routes 插件,并具有最多 10 个网站的许可证。

每个层级提供一年的支持并提供 30 天退款保证。

在您的 WordPress 网站上显示交互式地图

地图位置插件使您能够创建商店位置列表、引导游客游览任何城市,甚至让用户创建和调整地图以满足他们的需要。 这是 Creative Minds 开发团队提供的大量产品中的一个插件。

试用地图位置插件