google 我的地图 ~ 嵌入 wordpress 的自定义地图

Question

这是我在 Whosebug 上的第一个问题。我正在为 Bed and Breakfast 客户开发一个 wordpress 网站。在她当前的网站上，她在左侧有一张带有图例的地图。我调查了这是如何实现的，发现她正在使用一个名为 mapchannels.com

的网站

我正在使用 google 我的地图创建此自定义地图。我创建了一个 API 键并将其用于地图。当我通过 mapchannels 协议时，左侧图例中的标记看起来不像 google 我的地图工作 space 中的标记。此外，当我插入 iframe 代码以嵌入地图时，我在地图区域出现错误，显示“糟糕！出了点问题。此页面未正确加载 Google 地图。有关技术详细信息，请参阅 JavaScript 控制台。"

我只想向该站点添加一张地图，它不仅可以加载，而且标记看起来与我的 google 地图工作中的标记相同space。

这是我正在处理的页面 link https://jpalenhouseblog.com/index.php/map-and-plan-your-stay/ 这是通过 mapchannels.com
嵌入地图的当前网站 link 我已将 links 添加到以下 javascripts 到我的 wordpress 主题 ( Redwood ) 的 header.php 文件中，但地图仍然无法加载。

<script src=“https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=MY_API_KEY" async="" defer="defer" type="text/javascript"></script>

<script src=“https://maps.googleapis.com/maps/api/js?key=MY_API_KEY" async="" defer="defer" type="text/javascript"></script>

link to comparison between map embedded on dev site and map in my google maps workspace

任何关于这两个相关问题的建议都将不胜感激。

Answer 1

您在 dev console 中收到以下 JS 错误：

Google Maps JavaScript API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: https://www.mapchannels.com/mc6/27915/27915-jph.htm?v=20200217122746

Google Maps JavaScript API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: https://jpalenhouseblog.com/index.php/map-and-plan-your-stay/

要解决此问题，我建议您首先取消限制您的 API 密钥；如果地图加载了不受限制的密钥，那么您可以确定问题与限制有关。

现在，为了 restrict 您的 API 密钥正确，请尝试添加这些域引荐来源网址（包括通配符“*”，假设您拥有这两个域）：

*.mapchannels.com/*
*.jpalenhouseblog.com/*
mapchannels.com/*
jpalenhouseblog.com/*

希望对您有所帮助！

google 我的地图 ~ 嵌入 wordpress 的自定义地图

google my maps ~ custom map embed into wordpress

javascript

wordpress

google-maps

google-maps-api-3