03【Google Maps API v3】現在地座標を取得しマップ上に表示させる

前回は指定した座標をマップ上に表示させることができました！
前回の記事はこちら↓
1【Google Maps API v3】指定座標をマップ上に表示させる
今回は現在地座標を取得して動的にマップ上にマーカー画像を表示させていきたいと思います。

現在地を取得するには？

Google Map で現在地を取得するには Geolocation API というものを使用します。 Geolocation API はユーザーが使用しているデバイスの位置情報を扱うことができます。地図アプリなどを起動すると「位置情報の取得を許可しますか？」みたいなポップアップを見たことありませんか？

この動作をGeolocation API を使用することで位置情報の取得をすることができます。
今回は Geolocation API を使用して以下のような動作を実装していきます。

位置情報取得の許可の確認許可現在地情報を取得成功したら → 取得した座標をマップに表示
現在地情報を取得失敗したら → マップを表示しない
拒否位置情報を取得しない&マップを表示しない
ユーザーへ位置情報を取得するか確認をして拒否したら取得しない＆マップを表示しない
もしくは通信環境が悪かったり、位置情報が取得失敗したらマップを表示しない
という条件分岐で実装したいと思います。

Geolocation で条件分岐を実装

現在地を取得できているかを確認するには getCurrentPosition() というメソッドを使用します。
これを navigator.geolocation.getCurrentPosition() という形で取得していきます。 JavaScriptを以下のように追記してください↓

// マップオブジェクトの変数を空で宣言
 let map; let myLocation;  

// マップオプションを変数に格納
 let mapOptions = { 
  zoom: 14, // 拡大率 
  center: { // 中心座標を指定 
    lat: 35.6811673, // 緯度 
    lng: 139.7648629 // 経度 
  }
 };  

// マップオブジェクト作成
 map = new google.maps.Map(   document.getElementById('js-map'),   mapOptions );

  // マップにマーカーを表示する
 myLocation = new google.maps.Marker({ 
  map: map, // mapに対して指定（マップオブジェクト作成したやつ） 
  position: mapOptions.center, // mapOptionsから座標を指定 
  icon: { 
    url: 'https://higemura.com/wordpress/wp-content/uploads/2018/10/ic_gmap_mylocation.svg', // icon画像（png画像でも可） 
    scaledSize: new google.maps.Size(32, 32) // 表示するアイコンサイズ 
  }, 
  title: '現在地' // アイコンにマウスホバーすると出てくる文言 
});

  // 現在地座標を取得する
 navigator.geolocation.getCurrentPosition();

これで、現在地情報を取得する準備が整いました！

しかし、現在地情報を取得成功 or 取得失敗した時の処理を分岐させなくてはいけません。

そこで getCurrentPosition() の第一引数と第二引数を設定することで成功or失敗の処理を分けることができます。

// 位置情報取得が成功したら
let success = (pos) => {
  // マップオブジェクトの変数を空で宣言
  let map;
  let myLocation;

  // マップオプションを変数に格納
  let mapOptions = {
    zoom: 14, // 拡大率
    center: { // 中心座標を指定
      lat: 35.6811673, // 緯度
      lng: 139.7648629 // 経度
    }
  };

  // マップオブジェクト作成
  map = new google.maps.Map(
    document.getElementById('js-map'),
    mapOptions
  );

  // マップにマーカーを表示する
  myLocation = new google.maps.Marker({
    map: map, // mapに対して指定（マップオブジェクト作成したやつ）
    position: mapOptions.center, // mapOptionsから座標を指定
    icon: {
      url: 'https://higemura.com/wordpress/wp-content/uploads/2018/10/ic_gmap_mylocation.svg', // icon画像（png画像でも可）
      scaledSize: new google.maps.Size(32, 32) // 表示するアイコンサイズ
    },
    title: '現在地' // アイコンにマウスホバーすると出てくる文言
  });
}

// 位置情報取得が失敗したら
let error = (err) => {
  // エラーメッセージ
  msg = 'エラーが発生しました: ' + err;
  console.log(msg);
}

// 位置情報を取得
navigator.geolocation.getCurrentPosition(success, error);

第一引数に成功した時の処理（success）
第二引数に失敗した時の処理（error）
を設定できました！

埋め込みだとうまく確認できないかもしれないのでCodePenで直接確認ください↓

デモはこちら（Safari をお使いの方は確認できませんのでご注意ください）

しかしこのままでは位置情報の取得に時間が掛かった時に永遠に処理が終了しません。

そこで getCurrentPosition() の第三引数にタイムアウトなどのオプションを設定できます。

// 位置情報取得が失敗したら
let error = (err) => {
  // エラーメッセージ
  msg = 'エラーが発生しました: ' + err;
  console.log(msg);
}

// getCurrentPositionのオプション
let options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0
};

// 位置情報を取得
navigator.geolocation.getCurrentPosition(success, error, options);

このように第三引数の options 内に以下のような設定が可能です。

Option Key	型	説明
enableHighAccuracy	Boolean	精度の高い位置情報を取得する
timeout	Number	タイムアウトまでの時間（単位：ミリ秒）
maximumAge	NUmber	位置情報の有効期限（単位：ミリ秒）

現在地座標を取得する

これで現在地の座標を取得できるようになりました！あとは success 内に引数を使って現在地の緯度経度を取得し、指定することでマップ上に表示することができます。

以前、手動で指定していた緯度経度（東京駅の座標）を以下のように書き換えましょう↓

// 位置情報取得が成功したら
let success = (pos) => {
  // マップオブジェクトの変数を空で宣言
  let map;
  let myLocation;

  let nowLat = pos.coords.latitude; // 緯度
  let nowLng = pos.coords.longitude; // 経度
  // 現在地の緯度・経度を変数に格納
  let nowLatLng = new google.maps.LatLng(nowLat, nowLng);

  // マップオプションを変数に格納
  let mapOptions = {
    zoom: 14, // 拡大率
    center: nowLatLng // 中心座標を指定
  };

  // マップオブジェクト作成
  map = new google.maps.Map(
    document.getElementById('js-map'),
    mapOptions
  );

  // マップにマーカーを表示する
  myLocation = new google.maps.Marker({
    map: map, // mapに対して指定（マップオブジェクト作成したやつ）
    position: mapOptions.center, // mapOptionsから座標を指定
    icon: {
      url: 'https://higemura.com/wordpress/wp-content/uploads/2018/10/ic_gmap_mylocation.svg', // icon画像（png画像でも可）
      scaledSize: new google.maps.Size(32, 32) // 表示するアイコンサイズ
    },
    title: '現在地' // アイコンにマウスホバーすると出てくる文言
  });
}

// 位置情報取得が失敗したら
let error = (err) => {
  // エラーメッセージ
  msg = 'エラーが発生しました: ' + err;
  console.log(msg);
}

// getCurrentPositionのオプション
let options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0
};

// 位置情報を取得
navigator.geolocation.getCurrentPosition(success, error, options);