HTML5 地理位置情報

HTML5 地理位置情報は、ユーザーの位置を特定するために使用されます。

自分で試してみる: Google マップに現在地を表示する

ユーザーの位置をターゲットにする

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

この機能はユーザーのプライバシーを侵害する可能性があるため、ユーザーの同意がない限りユーザーの位置情報は利用できません。

ブラウザのサポート

地理位置情報は、Internet Explorer 9、Firefox、Chrome、Safari、Opera でサポートされています。

注: 地理位置情報は、iPhone などの GPS を備えたデバイスの方が正確です。

HTML5 - 地理位置情報を使用する

ユーザーの位置を取得するには、getCurrentPosition() メソッドを使用してください。

以下の例は、ユーザーの位置の経度と緯度を返す単純な地理位置情報の例です。

例

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

自分で試してみてください

説明例:

• 地理位置情報がサポートされているかどうかを検出する
• サポートされている場合は、getCurrentPosition() メソッドを実行します。 サポートされていない場合は、ユーザーにメッセージを表示します。
• getCurrentPosition() が正常に実行された場合は、パラメーター showPosition で指定された関数に座標オブジェクトを返します
• showPosition() 関数は経度と緯度を取得して表示します

上記の例は、エラー処理のない非常に基本的な地理位置情報スクリプトです。

エラーと拒否の処理

getCurrentPosition() メソッドの 2 番目のパラメータは、エラーを処理するために使用されます。 ユーザーの位置情報の取得が失敗したときに実行する関数を指定します。

例

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }

自分で試してみる

エラー コード:

• 許可が拒否されました - ユーザーは位置情報を許可していません
• 位置が利用できません - 現在の位置を取得できません
• タイムアウト - 操作がタイムアウトしました

地図上に結果を表示

結果を地図上に表示するには、Google マップや Baidu マップなど、緯度と経度を使用できる地図サービスにアクセスする必要があります。

例

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

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";

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

自分で試してみる

上記の例では、返された緯度と経度のデータを使用して、Google マップに位置を表示します (静止画像を使用)。

Google マップ スクリプト

上記のリンクは、スクリプトを使用して、マーカー、ズーム、ドラッグのオプションを備えたインタラクティブなマップを表示する方法を示しています。

特定の場所の情報

このページでは、ユーザーの位置を地図上に表示する方法を説明します。 ただし、地理位置情報は、特定の場所の情報を得るのにも役立ちます。

ケース:

• 現地の情報を更新する
• ユーザーの周囲の興味のある場所を表示する
• インタラクティブ カー ナビゲーション システム (GPS)

getCurrentPosition() メソッド - データを返す

getCurrentPosition() メソッドは、成功するとオブジェクトを返します。 緯度、経度、精度のプロパティは常に返されます。 利用可能な場合は、以下の他のプロパティが返されます。

地理位置情報オブジェクト - その他の興味深いメソッド

watchPosition() - ユーザーの現在位置を返し、ユーザーが移動すると更新された位置を返し続けます (車の GPS のように)。

clearWatch() - watchPosition() メソッドを停止します

次の例は、watchPosition() メソッドを示しています。 この例をテストするには、正確な GPS デバイス (iPhone など) が必要です。

例

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

自分で試してみてください