GoogleMaps API 関連資料

Toru Kano　

ここは GoogleMap API 関連資料置場です。

とりあえず GoogleMaps API を使うまでのメモ書きを残します。

【Google Maps API ウェブ向け Maps JavaScript API】
https://developers.google.com/maps/documentation/javascript/

1. まずは上記サイトに行き、「キーを取得」ボタンを押して「続ける」を押します。

2. 「プロジェクトの作成」が選択されていることを確認し、「続行」を押して暫く待ちます。

3. 「API認証情報」の画面になるので、必要に応じてAPIキーの名前を変更し、「キーの制限」は「なし」として、「作成」ボタンを押します。

4. アプリケーションで利用可能なAPIキーが作成されるので、キーをコピーします。

5. 以下のコードの [自分のAPIキー] の部分を、上でコピーしたAPIキーに置き換えて、body タグ内に挿入します。

<div id="map" style="width:100%, height:500px"></div>
<script type="text/javascript">

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.62721, lng: 139.3372463}, // 緯度と経度を指定
    zoom: 14 // 倍率を指定
  });
}

</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=[自分のAPIキー]&callback=initMap">
</script>

実行結果


基本的には、公式のチュートリアルページが参考になります。

【Google Maps API スタートガイド】
https://developers.google.com/maps/documentation/javascript/tutorial

以下のサイトも参考になると思います。

【Google Maps入門 (Google Maps JavaScript API V3)】
http://www.ajaxtower.jp/googlemaps/