Question

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

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

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

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 。

以下是使用它的简单示例（从我的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由网页加载应用;或
针对Static Maps API的地图图片发出了单一请求。
从街景视图中为全景图像发出单个请求图片API。

根据您的评论，

我也尝试使用canvas，但它无效。

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

但这对div元素很有用。

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

Updated 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（许多good examples in the documentation）

Answer 5

从Android手机试试吧

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

将此添加到您的锚链接

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

5 个答案:

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

5 个答案:

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