如何在没有密钥的情况下使用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

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