地図を表示してみる。Google Maps JavaScript API(v3)

ほぼサンプルのままですが、、

まずはhtml側。

<head>
  <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key={APIキー}&sensor=false"></script>
  <script type="text/javascript" src="/maps.js"></script>
</script>
</head>
<body>
  <div id="map_canvas" style="widht:300px;height:300px;"></div>
</body>

結局のところAPIキーはあっても無くても表示できるようですが、指定が推奨されているようなので、APIキーを取得して入れておきました。
APIキーの取得は、Developers Consoleで。
サイズはとりあえず300×300で。

続いてjs側。

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(35.658706, 139.745419),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

地図で指定した位置に特に意味はありませんが、これで東京タワーが中心の地図が表示されます。

地図を表示してみる。Google Maps JavaScript API(v3)

関連記事