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

How to use Google Maps without a key? (from static to dynamic with URL)

提问by gal007

I have seen that many users have asked this question, but in fact there is still no answers with examples of how to use Google Maps without a key (all the answers are references to another webpages).

我看到很多用户都问过这个问题，但实际上仍然没有答案，包括如何在没有密钥的情况下使用谷歌地图（所有答案都是对其他网页的引用）。

I have managed to use Google Maps without the key, but I only managed to get a static map. Do you have any idea how do this dynamic?

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

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

Even if you simply click this link you can see the map, and if you change the "url properties" you can "edit" the map: http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true

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

When I say "dynamic map" I mean to somethins like this: https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple

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

回答by user46487

This has worked for me. I tried it on localhost. Various other solutions in stackoverflow didn't helped.

这对我有用。我在本地主机上试过了。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 />

In this way we can generate maps dynamically based upon the address we entered in the back end.

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

回答by Praveen

As @geocodezip said, You're looking for Google Maps Javascript v3.

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

Here is simple example of using it(picked from my old answer), this doesn't need any keys.

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

HTML:

HTML：

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

CSS:

CSS：

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

Javascript:

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

I have created a simple fiddlefor your reference.

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

Hope you got some idea.

希望你有一些想法。

Since you're not interested in using keys, Beware of the limits.

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

Google Maps Javascript API :up to 25,000 map loads per day for each service.

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

This includes:

这包括：

1. a map is displayed using the Maps JavaScript API (V2 or V3) when
   loaded by a web page or application;
2. a Street View panorama is displayed using the Maps JavaScript API (V2 or V3) by a web page or application that has not also displayed a map;
3. a SWF that loads the Maps API for Flash is loaded by a web page or application; or
4. a single request is made for a map image from the Static Maps API.
5. a single request is made for a panorama image from the Street View Image API.

1. 当
   由网页或应用程序加载时，使用 Maps JavaScript API（V2 或 V3）显示地图；
2. 未显示地图的网页或应用程序使用 Maps JavaScript API（V2 或 V3）显示街景全景图；
3. 加载 Maps API for Flash 的 SWF 由网页或应用程序加载；或者
4. 从静态地图 API 对地图图像发出单个请求。
5. 对来自 Street View Image API 的全景图像发出一个请求。

From your comments,

从你的评论来看，

I too tried using canvas, it was not working.

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

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

But this is working good with divelement.

但这对div元素很有效。

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

Updated JSFiddle

更新了 JSFiddle

Don't forget to set width and height properties.

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

回答by ackuser

I am putting an example on plunker

我正在举一个关于plunker的例子

http://plnkr.co/T4eULTnKbWCKlABPI4pu

http://plnkr.co/T4eULTnKbWCKlABPI4pu

and the code

和代码

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

回答by geocodezip

Use the Google Maps Javascript API v3(lots of good examples in the documentation)

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

回答by Yene Mulatu

try it from android phone

从安卓手机试试

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

add this to your anchor link

将此添加到您的锚链接