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

Question

我想嘗試一個實現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>

Answer 1

~~首先：谷歌地圖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 個解決方案

解決方案1
80 已采納 2013-11-05 09:11:18

解決方案2
7 2016-06-29 03:53:12

解決方案3
0 2016-08-04 01:43:36

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

問題描述

3 個解決方案

解決方案1 80 已采納 2013-11-05 09:11:18

解決方案2 7 2016-06-29 03:53:12

解決方案3 0 2016-08-04 01:43:36

解決方案1
80 已采納 2013-11-05 09:11:18

解決方案2
7 2016-06-29 03:53:12

解決方案3
0 2016-08-04 01:43:36