<geolocation> - 変数

• トップ
• HTMLリファレンス
• <geolocation>

• 概要
• 説明
• 属性
• 使用例
• リンク

概要

形式

<geolocation>～</geolocation>

カテゴリ

フローコンテンツ

フレージングコンテンツ

インタラクティブコンテンツ

パルパブルコンテンツ

親要素

フレージングコンテンツ

子要素

フローコンテンツ

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

accuracymode

autolocate

watch

説明

ブラウザで表示するサイトに現在位置情報の取得を許可するか否かを確認するダイアログを表示します。まだ、標準化された仕様ではなく、下記で議論されているものを2026年1月リリースの Chrome 144 が先行実装したもののようです。ただ、何故か PC 版の Chrome 144 で試した場合、確認ダイアログが二度表示されてしまうようです。

• https://github.com/WICG/PEPC/blob/main/geolocation_explainer.md

<geolocation>～</geolocation> の間には、未対応ブラウザに対するフォールバックコードを記述することができます。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

accuracymode

正確さを指定します。approximate を指定すると大まかな位置情報が、precise を指定すると正確な位置情報の取得を打診します。省略すると approximate と見なします。

autolocate

すでにユーザーから許可を得ている場合、ページを開いた時点で位置情報の取得を試みます。

watch

位置情報を定期的に取得します。

使用例

<div><geolocation id="geo1" accuracymode="precise" autolocate watch></geolocation></div>
<output id="out1"></output>
<script>
document.getElementById("geo1").addEventListener("location", (event) => {
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    document.getElementById("out1").innerText += `${latitude} ${longitude}\n`;
  } else if (event.target.error) {
    document.getElementById("out1").innerText += `${event.target.error.message}\n`;
  }
});
</script>

リンク

• https://github.com/WICG/PEPC/blob/main/geolocation_explainer.md
• https://developer.chrome.com/blog/geolocation-html-element?hl=ja
• https://wicg.github.io/PEPC/permission-elements.html