如何在没有密钥的情况下使用Google地图？ （从静态到动态与URL）

Question

我已经看到很多用户都提出了这个问题，但事实上，如果没有密钥就使用谷歌地图的例子仍然没有答案（所有答案都是对其他网页的引用）。

我设法使用没有密钥的谷歌地图，但我只设法得到一个静态地图。 你知道这个动态怎么样？

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

即使您只是单击此链接，您也可以看到地图，如果您更改“网址属性”，则可以“编辑”地图： http ： //maps.googleapis.com/maps/api/staticmap？centter = -32.0000343 ，-58.0000343＆变焦= 5＆尺寸= 300×＆传感器=真visualRefresh =真

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

Answer 1

这对我有用。 我在localhost上试了一下。 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 />

通过这种方式，我们可以根据我们在后端输入的地址动态生成地图。

Answer 2

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

这是使用它的简单示例（从我的旧答案中挑选），这不需要任何键。

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

我已经创建了一个简单的小提琴供您参考。

希望你有所了解。

由于您对使用密钥不感兴趣， 请注意限制 。

Google Maps Javascript API：每项服务每天最多可处理25,000个地图。

这包括：

1. 使用Maps JavaScript API（V2或V3）时会显示地图
   由网页或应用程序加载;
2. 使用Maps JavaScript API（V2或V3）通过未显示地图的网页或应用程序显示街景全景图;
3. 加载Maps API for Flash的SWF由网页或应用程序加载; 要么
4. 针对Static Maps API中的地图图像发出单个请求。
5. 对街景图像API中的全景图像进行单个请求。

从你的评论，

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

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

但这对div元素很有用。

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

更新了JSFiddle

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

Answer 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>

Answer 4

使用Google Maps Javascript API v3 （ 文档中的许多好例子 ）

Answer 5

从Android手机试试吧

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

将此添加到您的锚链接