【问题标题】：Google Maps shows "For development purposes only"谷歌地图显示“仅用于开发目的”
【发布时间】：2018-12-01 08:09:24
【问题描述】：

当我尝试在我的网页中显示时，Google 地图会显示“仅用于开发目的”消息：

我怎样才能让这条消息消失？

我的代码是这样的：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
  function initialize() {  
    var myLatlng = new google.maps.LatLng(50.5792659,8.6744471);
    var centerMap = new google.maps.LatLng(50.5792659,8.6744471);
    var div = document.getElementById('map');
  }
</script>

然后我有

<p>
  <a
    href="https://www.google.com/maps/dir//50.5792659,8.6744471/@50.579266,8.674447,16z"
    target="_blank"
  >Route berechnen</a>
</p>

我看不出这条消息的来源。

【问题讨论】：

我知道这个问题已经得到解答，但如果您不知道，有一个名为 Google Maps Platform API Checker for Google Chrome 的工具，可让您调试您的 Google 地图集成 -> @987654322 @
谁暂时需要，有分机：chrome.google.com/webstore/detail/remove-for-development-pu/…
如果我将这个“仅用于开发目的”.map 用于发布的最终项目会怎样？有使用限制吗？我会被禁止吗？有人测试过吗？

标签： google-maps google-maps-api-3

【解决方案1】：

我知道这可能与问题无关，但我在 Vue 上遇到了同样的问题。即使我通过了 API_KEY，我仍然有同样的错误。我尝试了@Mike Dubs 的建议，它表明我没有通过 API KEY（即使我通过了）。我使用了vue2-google-maps 库，以及关于如何使用 API KEY 设置谷歌库的文档，他们说在 main.js 上我应该像这样进行导入：

从 'vue2-google-maps' 导入 * 作为 VueGoogleMaps；

但在我的情况下这不起作用，但这确实有效：

import * as VueGoogleMaps from './../node_modules/vue2-google-maps/src/main';

为什么，如何，我不知道，但我认为 vue 不知何故不理解导入。

【讨论】：

【解决方案2】：

试试这段代码，它不会显示“仅用于开发目的”

<iframe src="http://maps.google.com/maps?q=25.3076008,51.4803216&z=16&output=embed" height="450" width="600"></iframe>

【讨论】：

【解决方案3】：

对我来说，在谷歌控制台中激活结算时出现的错误已得到修复。（我获得了 1 年的开发者试用期）

【讨论】：

对我来说也一样。我没有收到任何警告电子邮件。我已经提供了信用卡详细信息，但出于某种原因，Google 要求我在一年后立即“升级”我的帐户。我点击升级按钮后，问题就解决了。

【解决方案4】：

如果您的mapTypeId 是`SATELLITE` 或`HYBRID`

嗯，它只是一个水印，你可以把它隐藏起来我用

setInterval(function(){
    $("*").each(function() {
        if ($(this).css("zIndex") == 100) {
            $(this).css("zIndex", "-100");
        }
    })}
, 10);

或者你可以使用

map.addListener('idle', function(e) {
    //same function
}

但反应不如setInterval

【讨论】：

“响应式”是什么意思？
更快，但不是更高效
如果这些方法曾经奏效，它们似乎仍然没有奏效。它们看起来像是触发了无限循环，因为谷歌只是把你所做的事情搞砸了。
此方法不起作用，因为 Google 使用不同的图像集，水印直接放在地图图块上，例如：maps.googleapis.com/maps/…

【解决方案5】：

出于我的目的，我最终使用了替代 https://www.openstreetmap.org/ 。

【讨论】：

【解决方案6】：

Google 地图不再免费。您必须关联一张信用卡，这样如果您的网站的请求超过了他们每月免费提供给您的 200 美元信用额度，您就可以收到账单。这就是您获得水印地图的原因。

欲了解更多信息，请参阅：https://cloud.google.com/maps-platform/pricing/

更新： 新计费系统的一个常见问题是您现在必须分别激活每个 API。它们都有不同的定价（有些甚至是免费的），因此 Google 强调让您为您的域单独启用它们。我从来都不是谷歌地图的重度用户，但我感觉现在的 API 比以前多得多。

因此，如果您在启用结算后仍然收到限制使用消息，请找出您想要提供的功能所需的 API，并检查它是否已启用。 API 设置很难找到。

转到此链接： https://console.developers.google.com/apis/dashboard。
然后在下拉列表中选择您的项目。
转到左侧窗格中的库。
浏览可用的 API 并启用您需要的 API。

【讨论】：

地图加载定价-->developers.google.com/maps/documentation/embed/…
非常感谢，你救了我的命。仅供参考，首次将您的帐户与 google 关联，您将免费获得 300 美元。
这需要几天才能生效吗？几天前我这样做了，但仍然在我的地图上收到消息。甚至四处点击并确保我接受了所有协议.....我在仪表板上看到了流量进入它的位置
不，通常不需要很长时间。我的经验是几分钟。但是您可能需要启用不同的 API 才能正常工作。 @DigitalMystery，您收到什么错误消息？
它在我的移动应用程序上。起初它弹出“此页面无法正确加载谷歌地图”。单击确定，地图将显示上述消息。我也在用我的钥匙.....@VictoriaRuiz

【解决方案7】：

现在谷歌地图仅供开发使用。

如果您想像以前一样免费使用地图，请创建一个帐户有效的详细信息（帐单、付款等） google 每月提供 200 美元的信用这相当于免费使用

更多详情请查看谷歌新价格详情：google map new pricing

另见旧价格详情：Old one

【讨论】：

嗨，你能告诉我吗，在多少次访问中，200 美元的免费信用可能会用完，知道吗？

【解决方案8】：

您不能在 HTML 中使用 iframe 标记，您可以这样做：
* 只需进入谷歌地图指出您的位置
* 点击“分享”
* 转到“嵌入地图”
* 复制 HTML 代码
* 将其粘贴到您的 HTML 页面中
* 根据您的要求调整高度和宽度
* 运行它

这可能有效

【讨论】：

【解决方案9】：

按照评论中的建议，我使用“Google Maps Platform API Checker”Chrome 插件来识别和解决问题。

基本上，这个插件将我引导至here，在那里我可以登录 Google 并创建免费的 API 密钥。

之后，我更新了我的 JavaScript，它立即解决了这个问题。

旧版 JavaScript：...script src="https://maps.googleapis.com/maps/api/js?v=3" ...

更新的 Javascript：...script src="https://maps.googleapis.com/maps/api/js?key=*****GOOGLE API KEY******&v=3" 。 ..

插件随后验证了 JS API 调用。希望这可以帮助某人快速解决问题！

【讨论】：

【解决方案10】：

在我看来，当它显示“仅用于开发目的”时，在开发过程中也看不到地图配置（或者更确切地说是玩弄配置）。在我的情况下，我没有启用与我正在使用的 API 相关联的计费，我认为这就是它的行为方式的原因。

【讨论】：

【解决方案11】：

当满足以下任一条件时，将返回带有 “仅用于开发目的”的水印：

请求缺少 API 密钥。
您的帐户尚未启用结算功能。
提供的计费方式无效（例如信用卡过期）。
已超出自我设定的每日限制。

【讨论】：

【解决方案12】：

正如维多利亚所写，Google 地图不再免费，但您可以更换地图提供商。您可能对 OpenStreetMap 感兴趣，这里描述了一种在您的网站上使用它的简单方法：https://handyman.dulare.com/switching-from-google-maps-to-openstreetmap/

不幸的是，在 OpenStreetMap 上，没有简单的方法来提供从一个点到另一个点的方向，也没有街景。

【讨论】：

如何使用 Angular 6 做到这一点？
我将该链接中的开放街道地图添加到了 jsfiddle：jsfiddle.net/nLj1uaqc

如果您的mapTypeId 是SATELLITE 或HYBRID

如果您的mapTypeId 是`SATELLITE` 或`HYBRID`