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>
まず第一に: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);
これらの変更により、マップが表示されます。
APIキーがなければ、Googleマップは機能しません...参照: https://console.cloud.google.com/apis
それは非常に簡単です!新しいAPIコードでは、リファラーを入力する必要があります。 localhostテストの場合:
空のままにする
ここにGoogle APIの説明もあります:
Accept requests from these HTTP referrers (web sites) (Optional)
Use asterisks for wildcards.
これを空白のままにすると、リファラーからのリクエストが受け入れられます。
本番環境でこのキーを使用する前に、リファラーを追加してください。