【发布时间】：2020-06-04 05:06:12
【问题描述】：
这是我在 stackoverflow 上的第一个问题。我正在为民宿客户开发一个 wordpress 网站。在她当前的站点上，她的左侧有一张带有图例的地图。我查看了这是如何实现的，发现她正在使用一个名为 mapchannels.com
的网站我正在用谷歌我的地图创建这个自定义地图。我创建了一个 API 密钥并将其用于地图。当我通过 mapchannels 协议时，左侧图例中的标记看起来不像谷歌我的地图工作空间中的标记。此外，当我插入 iframe 代码以嵌入地图时，我在地图区域中收到一条错误消息，显示“糟糕！出了点问题。 此页面未正确加载 Google 地图。有关技术详情，请参阅 JavaScript 控制台。”
我只想向该站点添加一个地图，该地图不仅可以加载，而且其标记看起来与我的谷歌地图工作区中的标记相同。
这是我正在处理的页面的链接https://jpalenhouseblog.com/index.php/map-and-plan-your-stay/
这是当前网站的链接，其中包含通过 mapchannels.com 嵌入的地图
我已将以下 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
对于这两个相关问题中的任何一个，我们将不胜感激。
【问题讨论】：
-
您好，欢迎来到 SO。该地图要求您检查控制台以获取技术详细信息。查看您的错误时，它会显示
RefererNotAllowedMapError。您是否已将使用地图的域添加到开发者控制台的白名单中？ -
嗨，埃米尔。感谢您的输入。我在控制台中看不到任何指示“白名单”的地方。我也不知道在哪里查看技术细节，因为我是使用我的地图环境创建地图的新手。你能告诉我在哪里，至少我可以添加域吗？
-
关注 these steps 创建您的 API 密钥并启用它。并阅读同一页面上的this section，了解如何在 Google Developer Console 的 应用程序限制 部分添加您的域。
-
你好，Emiel。我刚刚浏览了控制台和我的项目，并错误地将要托管的网站的 URL 添加到“受限列表”中。所以，当然地图没有加载。我的错。我已从受限列表中删除了 URL，现在正在加载地图。感谢您指出这一点，因为如果您没有，我不会对此进行调查。非常感谢。
-
嗨@evan。谢谢你这样做。作为新手，我犯了一些相当新手的错误哈哈。我很感激帮助。问候，丹尼斯
标签： javascript wordpress google-maps google-maps-api-3