HTML DOM Geolocation coordinatesプロパティとは？使い方とサンプルコードを徹底解説

HTML DOMのGeolocation coordinatesプロパティは、ユーザーのデバイスの地球上における位置（緯度・経度）や高度を取得するために使用されます。このプロパティが動作するためには、事前にユーザーが位置情報の提供に同意する必要があります。これは、ユーザーのプライバシーを保護するために設けられた仕組みです。この機能を活用することで、さまざまなデバイスの位置情報を追跡することが可能になります。

coordinatesプロパティの一覧

coordinatesプロパティには、以下の7種類があります。

注意： これらのプロパティはすべて読み取り専用であり、戻り値の型はdouble（倍精度浮動小数点数）です。

番号	プロパティと説明
1	coordinates.latitude デバイスの位置の緯度を10進法の度数で返します。
2	coordinates.longitude デバイスの位置の経度を10進法の度数で返します。
3	coordinates.altitude 海面を基準とした位置の高度をメートル単位で返します。デバイスにGPSが搭載されていない場合はnullを返すことがあります。
4	coordinates.accuracy latitudeおよびlongitudeプロパティの精度をメートル単位で返します。
5	coordinates.altitudeAccuracy altitudeプロパティの精度をメートル単位で返します。
6	coordinates.heading デバイスが進行している方向を返します。この値は度数で表され、真北からのずれを示します。0度が真北を表し、方向は時計回りに決定されます（東は90度、西は270度）。速度が0の場合、headingはNaNになります。また、デバイスが方位情報を提供できない場合、この値はnullになります。
7	coordinates.speed デバイスの移動速度をメートル毎秒で返します。この値はnullになることがあります。

構文

Geolocation coordinatesプロパティの構文は以下の通りです。

coordinates.property

「property」の部分には、上記の表で紹介したプロパティ名のいずれかを指定します。

サンプルコード

それでは、Geolocation coordinatesプロパティの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Geolocation coordinates property</h1>
<p>下のボタンをクリックして座標を取得してください</p>
<button onclick="getCoords()">COORDINATES</button>
<p id="Sample">あなたの座標：</p>
<script>
   var p = document.getElementById("Sample");
   function getCoords() {
      if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(showCoords);
      } else {
         p.innerHTML ="このブラウザはジオロケーションに対応していません。";
      }
   }
   function showCoords(position) {
      p.innerHTML = "Longitude:" + position.coords.longitude + "<br>Latitude: " + position.coords.latitude+"<br>Accuracy: "+ position.coords.accuracy;
   }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM Geolocation coordinatesプロパティとは？使い方とサンプルコードを徹底解説

COORDINATESボタンをクリックし、「位置情報へのアクセスを許可しますか？」というポップアップで「許可」を選択すると、以下のように座標が表示されます。

HTML DOM Geolocation coordinatesプロパティとは？使い方とサンプルコードを徹底解説

コードの解説

このサンプルコードの仕組みを順番に見ていきます。

まず、ユーザーがクリックするとgetCoords()メソッドが実行される「COORDINATES」ボタンを作成しています。

<button onclick="getCoords()">COORDINATES</button>

getCoords()関数では、navigatorオブジェクトのgeolocationプロパティを参照して、ブラウザがジオロケーションに対応しているかどうかを判定します。対応している場合はGeolocationオブジェクトが返され、navigator.geolocationプロパティのgetCurrentPosition()メソッドを使ってデバイスの現在位置を取得します。getCurrentPosition()メソッドはコールバック関数であり、JavaScriptではすべての関数がオブジェクトとして扱われるため、引数として関数を受け取ります。

ここでは、showCoords()メソッドをコールバックとして渡しています。showCoords()メソッドはpositionインターフェースを引数として受け取り、その情報をもとにid「Sample」が付与された段落要素内に経度・緯度・精度を表示します。段落のinnerHTMLプロパティを利用して、テキストを動的に追加しています。

function getCoords() {
   if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showCoords);
   } else {
      p.innerHTML ="このブラウザはジオロケーションに対応していません。";
   }
}
function showCoords(position) {
   p.innerHTML = "Longitude:" + position.coords.longitude + "<br>Latitude: " + position.coords.latitude+"<br>Accuracy: "+ position.coords.accuracy;
}

HTML DOM スタイルの animationIterationCount プロパティとは？使い方と設定方法を解説

HTML DOM の fullscreenEnabled プロパティとは？使い方とサンプルコードを解説

HTML DOM Ol reversedプロパティとは？リストの降順・昇順を切り替える方法を解説
HTML DOMのOl reversedプロパティは、順序付きリスト（<ol>要素）の番号を降順にするか、昇順（デフォルト）にするかを設定・取得するためのプロパティです。JavaScriptから動的にリストの番号付けの方向を変更したい場合に活用できます。構文ブール値（true / false）を取得する場合olObject.reversedreversedプロパティにブール値を設定する場合olObject.reversed = booleanValueここで指定できる「booleanValue」の値と意味は以下の通りです。booleanValue説明trueリストの番号が降順で表示
HTML DOM offsetWidthプロパティの使い方をわかりやすく解説
HTML DOM offsetWidthプロパティとは HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。構文 HTMLElement.offsetWidth 要素が非表示(display: none など)の状態にある場合は、0 が返されます。関連プロパティとの違い offsetWidth: パディング+ボーダー+スクロールバー