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

Nev*_*lle 42 javascript google-maps google-maps-api-3

我想尝试一个实现Gmaps v3的示例演示,并从Google的文档中尝试了这个示例,但没有输出,页面只加载几秒钟然后空白,没有输出.

<!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>
Run Code Online (Sandbox Code Playgroud)

Joa*_*hde 80

首先:谷歌地图3不再需要api密钥,所以你没关系

https://maps.googleapis.com/maps/api/js?sensor=false
Run Code Online (Sandbox Code Playgroud)

作为一个URL.

(正如Jeff Hoye指出的那样,截至2016年6月22日,再次需要API密钥.)

然后你忘了这行中的"新":

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

通过这些更改,您的地图将会显示出来.

  • API Key [这里]也有很好的解释(http://stackoverflow.com/a/8785844/2327005) (5认同)
  • 仅供参考,截至2016年6月22日,他们再次需要API密钥:http://googlegeodevelopers.blogspot.com.au/2016/06/building-for-scale-updates-to-google.html (5认同)
  • 谷歌地图javascript API v3也不再需要`sensor`参数. (3认同)

Rav*_* Ji 7

如果没有API密钥,Google地图就无法使用...参考:https://console.cloud.google.com/apis