Google Maps API入門(ドットインストール)

ドットインストールから参照。Google Maps API入門メモ。

01 Google Mapsを使ってみよう

• 開発者向けの公式サイトは https://developers.google.com/maps/?hl=ja

02 描画の準備をしよう

• 日本語設定で使いたい場合は ?language=ja
• さらに、地域の設定を日本にしたい場合は &region=JP
• API が読み込まれたあとに実行するコールバック関数を指定
• 今回使う API では非同期でスクリプトを読み込むことが推奨されているので、 async 属性と defer 属性をつける

03 APIキーを取得しよう

• Google API Console でプロジェクトを作成し、API キーを発行

04 マップを描画してみよう

• var target としてあげて、 document.getElementById で取得

index.html

<script>
  function initMap() {
    'use strict';
    var target = document.getElementById('target');
    var map;
    var tokyo = {lat: 35.681167, lng: 139.767052};

    map = new google.maps.Map(target, {
      center: tokyo,
    }); 
</script>

05 マップのオプションを見ていこう

• disableDefaultUI=全画面表示だとかの UI を無効化するためのオプション
• 衛星写真にしたい場合は mapTypeId: 'satellite'

06 マップにイベントを設定してみよう

• イベントを設定するには、 map に対して addListener とする
• クリックした箇所の緯度経度を表示する。 e.latLng.lat() で緯度、 e.latLng.lng() で経度が取得

map.addListener('click', function(e) ({
  console.log(e.latLng.lat());
  console.log(e.latLing.lng());
});

07 マーカーを表示してみよう

• marker をどの map に配置したいかを指定
• title で marker にホバーした時の文字列を指定

marker = new google.maps.Marker({
  position: tokyo,
  map: map,
  title: 'Tokyo!',
  icon: 'icon.png'.
  animation: google.maps.Animation.BOUNCE
});

• ストンと落ちるような DROP も指定可能

08 インタラクティブにマーカーを操作しよう

09 情報ウィンドウを表示させよう

• 地図上に情報ウィンドウを配置。そのための変数を用意してあげて、この辺りでインスタンスを作る。
• 情報ウィンドウを表示するには、infoWindow.open(map); としてあげて、表示する map を指定

10 マーカーと情報ウィンドウを紐付けよう

• infoWindow.open(… 、とするが map に配置しつつ、 marker に紐付けたい場合は、このように書けば OK.

11 ジオコーディングを使ってみよう

Geocoding と、それから Reverse Geocoding について

• eocoding が、住所を緯度・経度に変換する仕組み。Reverse Geocoding はその逆
• つまり緯度・経度から住所を割り出す仕組み

12 住所を緯度経度に変換しよう

• address キーにしつつ、 form に入力された値を渡してあげれば OK.
• status を調べて 'OK' 以外だったら、処理を中断してあげる

document.getElementById('search').addEventListener('click', function() {
  geocoder.geocode({
    address: document.getElementById('address').value
  ), function(results, status) {
    if (status !== 'OK') {
      alert('Failed: '+ status);
      return;
    });
});

13 リバースジオコーディングを使おう

• マップをクリックした時の処理
• map とした後に addListener をくっつけてあげて、クリックした時に次の処理を行いなさいと書いていけば OK

14 緯度経度から住所を割り出そう

• everse Geocoding の場合は location で緯度・経度を渡してあげる。

15 Places APIを使ってみよう

• API を読み込む URL に $libraries=places と付ける必要があるので注意

16 施設情報を検索してみよう

• OK だったらなんらかの処理をして、 OK じゃなかったら alert('Failed:' status) を出してあげて、処理を中断してあげる

17 Geolocationを使ってみよう

• eolocation と Google Maps API を組み合わせることもよくある