Web Geolocation API

1. ユーザーの位置情報を特定する

HTML Geolocation APIは、ユーザーの地理的な位置情報を取得するために使用されます。

この機能はプライバシーに関わるため、ユーザーが承認しない限り、位置情報は利用できません。

ポイント
Geolocation（ジオロケーション）は、スマートフォンなどのGPSを搭載したデバイスで最も高い精度を発揮します。

2. ブラウザのサポート状況

Geolocation APIは、現在すべての主要なブラウザでサポートされています。

3. Geolocation API の使用方法

ユーザーの位置情報を取得するには、getCurrentPosition() メソッドを使用します。

以下の例は、ユーザーの緯度（Latitude）と経度（Longitude）を返す基本的なスクリプトです。

3.1 実装コードの例

<script>
const x = document.getElementById("demo");

function getLocation() {
  // Geolocationがサポートされているか確認
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "このブラウザはGeolocationをサポートしていません。";
  }
}

function showPosition(position) {
  // 成功時：緯度と経度を出力
  x.innerHTML = "緯度: " + position.coords.latitude +
  "<br>経度: " + position.coords.longitude;
}
</script>

コードの解説:

1. サポート確認: navigator.geolocation が存在するかチェックします。
2. メソッド実行: サポートされている場合、getCurrentPosition() メソッドを実行します。
3. コールバック: 取得に成功すると、指定した関数（showPosition）に coordinates オブジェクトが渡されます。
4. 出力: showPosition 関数が緯度と経度を画面に表示します。

※この例は非常に基本的なスクリプトであり、エラーハンドリングは含まれていません。

4. エラーと拒否のハンドリング

getCurrentPosition() メソッドの第2パラメータを使用することで、エラーハンドリングを行うことができます。これは、位置情報の取得に失敗した際に実行される関数を指定するものです。

4.1 エラー処理の例

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "ユーザーがGeolocationのリクエストを拒否しました。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "位置情報が利用できません。"
      break;
    case error.TIMEOUT:
      x.innerHTML = "ユーザー位置取得のリクエストがタイムアウトしました。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "不明なエラーが発生しました。"
      break;
  }
}

5. 結果をマップに表示する

取得した結果を地図上に表示するには、Google Mapsなどのマップサービスを利用する必要があります。

以下の例では、返された緯度と経度を使用して、Google Mapsの静止画（Static Map）に位置を表示させています。

5.1 マップ表示の例

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;

  // Google Maps Static APIのURL生成（YOUR_KEYは自身のAPIキーに置換が必要）
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

6. ロケーション固有の情報

位置情報は、地図上に表示するだけでなく、以下のような特定の場所に基づいた情報の提供に非常に有用です。

• 最新のローカル情報: 周辺のニュースや天気など
• 周辺スポット（POI）の表示: ユーザーの近くにある興味深い場所の提示
• ナビゲーション: 目的地までのルート案内（GPS機能）

7. getCurrentPosition() メソッドの戻り値

getCurrentPosition() メソッドは、成功時にオブジェクトを返します。緯度（latitude）、経度（longitude）、および精度（accuracy）のプロパティは常に返されます。その他のプロパティは、利用可能な場合にのみ返されます。

8. Geolocation オブジェクトのその他のメソッド

Geolocation オブジェクトには、他にも興味深いメソッドがあります。

• watchPosition(): ユーザーの現在の位置を返し、ユーザーが移動するたびに更新された位置を継続的に返します（車のGPSのような動作）。
• clearWatch(): watchPosition() メソッドによる監視を停止します。

以下の例は、watchPosition() メソッドを使用したものです。これをテストするには、スマートフォンなどの精度の高いGPSデバイスが必要です。

8.1 リアルタイム追跡の例

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    // 位置情報の変化を監視
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "このブラウザはGeolocationをサポートしていません。";
  }
}

function showPosition(position) {
  x.innerHTML = "緯度: " + position.coords.latitude +
  "<br>経度: " + position.coords.longitude;
}
</script>