如何在没有钥匙的情况下使用谷歌地图？（使用 URL 从静态到动态）答案

【问题标题】：How to use Google Maps without a key? (from static to dynamic with URL)如何在没有钥匙的情况下使用谷歌地图？（使用 URL 从静态到动态）
【发布时间】：2013-08-08 15:52:55
【问题描述】：

我看到很多用户都问过这个问题，但实际上仍然没有给出如何在没有钥匙的情况下使用谷歌地图的示例答案（所有答案都是对另一个网页的引用）。

我已经设法在没有密钥的情况下使用谷歌地图，但我只设法获得了一张静态地图。你知道这个动态是怎么做的吗？

var img = new Image();

img.src = "http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true";

return img; //OR document.body.appendChild(img);

即使您只需单击此链接，您也可以看到地图，并且如果您更改“url 属性”，您可以“编辑”地图： http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true

当我说“动态地图”时，我的意思是这样的：https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple

【问题讨论】：

“动态”是什么意思？您想要一个指向Google Map 的链接，以便您可以缩放和平移它？喜欢this
没错！对不起，我会把这个添加到描述中
去谷歌地图。按照您希望的方式设置地图。单击“链接”图标（看起来像一条链）。复制该 URL 并使用它。或者要获得更多控制权，请使用 Google Maps Javascript API v3
不要使用已弃用的v2 API（您发布的示例正在使用）。
我需要根据我的应用改变位置，所以我认为API是正确的方法，但是所有的例子都有一个api密钥，我想在没有密钥的情况下这样做。跨度>

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

【解决方案1】：

这对我有用。我在本地主机上试过了。 stackoverflow 中的其他各种解决方案都没有帮助。

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=<?php echo urlencode($address); ?>&amp;output=embed"></iframe><br />

这样我们就可以根据我们在后端输入的地址动态生成地图了。

【讨论】：

这太棒了

【解决方案2】：

正如@geocodezip 所说，您正在寻找Google Maps Javascript v3。

这里是使用它的简单示例（选自我的old answer），这不需要任何键。

HTML：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map-canvas"></div>

CSS：

#map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }

Javascript：

function initialize() {
    var myLatlng = new google.maps.LatLng(43.565529, -80.197645);
    var mapOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     //=====Initialise Default Marker    
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'marker'
     //=====You can even customize the icons here
    });

     //=====Initialise InfoWindow
    var infowindow = new google.maps.InfoWindow({
      content: "<B>Skyway Dr</B>"
  });

   //=====Eventlistener for InfoWindow
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

我创建了一个simple fiddle 供您参考。

希望你有一些想法。

由于您对使用密钥不感兴趣，Beware of the limits。

Google Maps Javascript API：每天最多加载 25,000 个地图服务。

这包括：

使用 Maps JavaScript API（V2 或 V3）显示地图
由网页或应用程序加载；
街景全景图使用 Maps JavaScript API (V2 或 V3) 由尚未显示的网页或应用程序地图；
加载 Maps API for Flash 的 SWF 由网页加载或应用;或
从静态地图 API 发出一个地图图像请求。
对街景中的全景图像发出单个请求图片 API。

来自您的 cmets，

我也尝试过使用canvas，但它不起作用。

 var mapCanvas = document.createElement("canvas");

但这对div 元素很有效。

var mapCanvas = document.createElement("div");
mapCanvas.style.width = "200px";
mapCanvas.style.height = "200px";

Updated JSFiddle

不要忘记设置宽度和高度属性。

【讨论】：

谢谢！我想我忘了写一些我需要的要求，但这解决了这个问题，所以它就是答案（小提琴太好了）
@gal007 它不适用于画布元素。但检查这个小提琴jsfiddle.net/vQKkq/8。我使用了div。希望这就足够了。
Google Maps JavaScript API 不再需要传感器参数。它不会阻止 Google Maps JavaScript API 正常工作，但我们建议您从脚本元素中删除传感器参数。 developers.google.com/maps/documentation/javascript/…
这很好用，但是在谷歌引入限制后这个答案仍然有效吗？如果我在应用程序内使用 webview 并加载地图，此 URL 是否也适用于生产 Android 和 iOS 应用程序？
这个解决方案在 jsfiddle 上运行良好，但是当我在我的网站上使用它时，它给了我一个错误，说这个地图无法加载，因为你需要 API 代码，我该怎么办？

【解决方案3】：

我在 plunker 上举个例子

http://plnkr.co/T4eULTnKbWCKlABPI4pu

和代码

<!DOCTYPE html>
<html>
<body>

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=London&amp;ie=UTF8&amp;&amp;output=embed"></iframe><br />

</body>
</html>

【讨论】：

这很好用，但是在谷歌引入限制后这个答案仍然有效吗？如果我在应用程序内使用 webview 并使用 iframe 加载地图，此 URL 是否也适用于 Production Android 和 iOS 应用程序？

【解决方案4】：

使用Google Maps Javascript API v3（很多good examples in the documentation）

【讨论】：

我需要根据我的应用改变位置，所以我认为API是正确的方法，但是所有的例子都有一个api密钥，我想在没有密钥的情况下这样做。跨度>
Google Maps Javascript API v3 不需要 API 密钥。如果您想跟踪自己的 API 使用情况，或者遇到免费 API 限制并想支付更多费用，建议且必须这样做。

【解决方案5】：

在安卓手机上试试

href = "google.streetview:cbll=51.470305,-0.183842&cbp=1,10,,0,2.0&mz=mapZoom"

将此添加到您的锚链接

【讨论】：