Question

我想试用一个实施Gmaps v3的示例演示，并从Google的文档中试用了这个示例，但是没有输出，页面只加载了几秒钟然后空白，没有输出。 / p>

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

Answer 1

~~首先：Google地图3不再需要api密钥了，所以你可以~~

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

~~作为URL。~~

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

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

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

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

Answer 2

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

Answer 3

这很容易！在新的API代码中，您应该输入您的引荐来源。所以对于你的localhost测试：

离开它空虚

这里也是google api的解释：

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

如果您将此处留空，则系统会接受任何推荐人的请求在生产中使用此密钥之前，请务必添加引用。

Google Maps v3 api for localhost无法正常工作

3 个答案: