Question

当我尝试在网页中显示Google Maps时，会显示消息“仅供开发使用”：

我如何使此消息消失？

我的代码是这样的：

  <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');

然后我有

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

我看不到此消息的来源。

Answer 1

Google地图不再免费。您必须关联一张信用卡，以便如果您的网站提出的请求超过他们每月免费提供给您的$ 200信用额，就可以向您收取费用。这就是为什么您获得带水印的地图的原因。

有关更多信息，请参见：https://cloud.google.com/maps-platform/pricing/

更新：新计费系统的一个常见问题是您现在必须分别激活每个API。它们都有不同的定价（有些甚至是免费的），因此Google提出了让您为您的域分别启用它们的观点。我从不沉迷于Google Maps，但是我感到现在的API比以前更多了。

因此，如果您在启用计费后仍然收到受限使用消息，请找出您要提供的功能所需的API，然后检查是否已启用。烦人的API设置很难找到。

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

Answer 2

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

加水印：

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

Answer 3

正如Victoria所写，Google Maps不再免费，但是您可以切换地图提供商。您可能对OpenStreetMap感兴趣，这里介绍了一种在您的网站上使用它的简便方法：https://handyman.dulare.com/switching-from-google-maps-to-openstreetmap/

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

Answer 4

根据评论中的建议，我使用了“ 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调用。希望这可以帮助某人快速解决问题！

Answer 5

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

Answer 6

现在，谷歌地图仅供开发免费。

如果您想像以前一样免费使用地图，请使用   有效的详细信息（付款，付款等），Google每月提供$ 200的信用额   相当于免费使用

有关更多详细信息，请参阅Google的新价格详细信息：google map new pricing

另请参阅旧的价格详细信息：Old one

Answer 7

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

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

Answer 8

在我看来，当它显示“仅出于开发目的”时，在开发时（或者只是在玩这些配置），人们也看不到地图配置。就我而言，我尚未使计费功能与我使用的API相关联，我认为这就是其行为方式的原因。

Answer 9

如果您想要一个免费的简单位置图来显示单个标记的位置，则为您的网站，然后

转到AddMap。
您可以在此处填写详细信息以完全自定义地图，例如位置详细信息，地图大小和格式。
最后要添加google map api密钥，请使用此method生成它。

让我知道是否有帮助。

Answer 10

像这样添加google map js文件

   <script src="https://maps.googleapis.com/maps/api/js?key=your key here"
    async defer></script>

添加

时，您将获得仅用于开发目的的消息

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

因此避免在脚本标签中添加callback = initMap

此外，请确保您已将您的网站添加到Google开发者控制台地图部分：

Answer 11

对我来说，在Google控制台中激活结算后，错误已得到修复。（我获得了为期一年的开发者试用）

Answer 12

嗯，这只是一个水印，如果您更改具有<div>的{{1}}，则可以将其隐藏我用

z-index=100

或者您可以使用

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

但它的响应速度不如map.addListener('idle', function(e) { //same function }

Answer 13

我知道这可能与问题无关，但我在 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 不知何故不理解导入。

Answer 14

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

这可能有效

Google地图显示“仅用于开发目的”

14 个答案: