web-dev-qa-db-ja.com

localhost用のGoogle Maps v3 APIが機能しない

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>
javascriptgoogle-mapsgoogle-maps-api-3
41
Neville

まず第一に：Google Maps 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);

これらの変更により、マップが表示されます。

80
Joachim Rohde

APIキーがなければ、Googleマップは機能しません...参照： https://console.cloud.google.com/apis

7
Ravi Ji

それは非常に簡単です！新しいAPIコードでは、リファラーを入力する必要があります。 localhostテストの場合：

空のままにする

ここにGoogle APIの説明もあります：

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

これを空白のままにすると、リファラーからのリクエストが受け入れられます。
本番環境でこのキーを使用する前に、リファラーを追加してください。

0
Ebrahim