43

I wanted to try out a sample demo of implementing Gmaps v3 and tried out this example from Google's documentation, but there is no output , the page just loads for a few seconds and then blank, no output.

<!DOCTYPE html>
<html lang = "en">
<head>
    <style type="text/css">
        html{height: 100%}
        body{height: 100%; margin: 0; padding: 0}
        #map-canvas{height: 100%}
    </style>
    <title>GMaps Demo</title>
    <script src = "https://maps.googleapis.com/maps/api/js?
                   key=${API_KEY}&sensor=false">
    </script>
    <script>
        function initialize(){
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = google.maps.Map(
                      document.getElementById("map-canvas"),
                      mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
</head>
<body>
    <div id = "map-canvas">
    </div>
</body>
</html>
4

3 回答 3

81

首先：Google Maps 3 不再需要 api 密钥，所以您可以使用

https://maps.googleapis.com/maps/api/js?sensor=false

作为网址。

（正如 Jeff Hoye 指出的那样，截至 2016 年 6 月 22 日，API 密钥再次需要。）

然后你忘记了这一行中的“新”：

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

通过这些更改，您的地图将被显示。

于 2013-11-05T09:11:18.497 回答
7

如果没有 API 密钥，Google 地图现在无法工作......参考：https ://console.cloud.google.com/apis

于 2016-06-29T03:53:12.447 回答
0

这很容易！在新的 API 代码中，您应该输入您的推荐人。因此，对于您的 localhost 测试：

留空

这里也是google api的解释：

 Accept requests from these HTTP referrers (web sites) (Optional)
 Use asterisks for wildcards.

如果您将此留空，则将接受来自任何推荐人的请求。
请务必在生产中使用此密钥之前添加引荐来源网址。

于 2016-08-04T01:43:36.433 回答