<geolocation>: 位置情報要素

属性

この要素にはグローバル属性があります。

autolocate

論理属性で、true に設定すると、事前にその権限が与えられている場合に限り、<geolocation> 要素がレンダリングされた時点でブラウザーが直ちに位置情報を取得することを指定します。false に設定すると、ユーザーがコントロールを起動するまで位置情報は取得されません。デフォルトは false です。

事前に許可が与えられていない場合、この属性は効果がありません。

watch

論理属性で、true に設定すると、ユーザーの端末の位置が変更されるたびにブラウザーが位置情報を取得することを指定します。false に設定すると、位置情報は一度だけ取得されます。デフォルトは false です。

解説

<geolocation> 要素は、位置情報の共有を宣言的に制御するブラウザー定義の機能を指定します。例えば Chrome では、このボタンには「地図のピン」アイコンと直感的なテキスト（「位置情報の使用」と英語コンテンツでは表示）が採用されています。

また、ユーザー権限の直感的な管理を実現します。 例えば Chrome では、ユーザーが以前に位置情報のアクセス許可を拒否した場合、または選択せずに許可ダイアログを閉じた場合、ボタンを再度押して選択を更新できます。 以前に許可を拒否した場合、以降のダイアログで「位置情報の共有を許可していません」と通知され、引き続き許可しないか、許可するかを尋ねられます。

<geolocation> 要素の重要な側面は、ユーザーの意識的な選択を反映し、ユーザーが気づかずに位置データを指定してしまう可能性のある操作をブロックすることです（詳細は<geolocation> のブロックを参照）。

この要素の DOM API インターフェイスである HTMLGeolocationElement は、取得された位置データ、現在の許可状態、およびデータ取得が失敗した場合のエラーにアクセスする機能を提供し、JavaScript ロジックを書かなければならない量を削減します。また、位置データの受信、許可状態の変更、および許可ダイアログに対するユーザーの操作に応じてコードを実行するためのイベントも利用可能です。

位置情報 API との関係

位置情報 API は、位置データ処理のための古いもう一つの手段を提供しています。この API にはいくつか欠点があり、<gelocation>要素はその解決を目指しています。特に顕著なのは、データリクエストのためのUIと基盤となるロジックを毎回ゼロから実装する必要がある点、およびその権限を処理する際に直感的でない場合がある点です。

<geolocation> 要素は、バックグラウンドで位置情報 API の機能を使用します。デフォルトでは、ブラウザーは位置データを一度だけリクエストします。これは、Geolocation.getCurrentPosition() メソッドが呼び出された場合と同様です。ただし、watch 属性が true に設定されている場合、ブラウザーは端末の位置が変化するたびにデータを更新します。これは、Geolocation.watchPosition() が呼び出された場合と同様です。

データが正常に取得された場合、HTMLGeolocationElement.position プロパティで利用可能となり、このプロパティには GeolocationPosition オブジェクトが含まれます。データの取得に失敗した場合、エラー情報は HTMLGeolocationElement.error プロパティで利用可能であり、このプロパティには GeolocationPositionError オブジェクトが含まれています。

ボタンの言語の設定

グローバル属性 lang は、<geolocation> 要素がレンダリングされるテキストの言語を選択するために使用されます。つまり、lang 属性を <geolocation> 要素自体またはその親要素のいずれかに直接設定することで、ボタンラベルに使用する言語をブラウザーに指示できます。

適切な lang 属性が設定されていない場合、ブラウザーの優先言語設定が使用されます。

代替コンテンツを含める

<geolocation>要素の開始タグと終了タグの間に、サポートされていない場合に表示される代替コンテンツを記載することができます。例えば、「対応していません」というメッセージを記載することができます。

<geolocation>
  <p>このブラウザは位置情報要素に対応していません。</p>
</geolocation>

しかし、現実的でより良い解決策としては、位置情報 API を使用して位置情報を取得する通常の <button> 要素を記載する方法があります。

<geolocation>
  <button id="fallback">位置情報を使用</button>
</geolocation>

<geolocation> のブロック

<geolocation> 要素の設計における重要な考え方の一つは、位置情報を公開するというユーザーの意識的な選択を反映し、悪意のある攻撃者がクリックジャッキングなどを通じてユーザーを騙してこれを有効化させることを防止することです。このため、ブラウザーはレンダリングされたそれぞれの要素について、いわゆるブロッカーの理由を記録します。

<geolocation> 要素に対してブロッカーが有効になっている場合、その要素は理由に応じて一時的または永続的に機能しなくなります（ブロックされます）。<geolocation> 要素がブロックされると、無効な要素であるといいます。HTMLGeolocationElement.isValid プロパティを問い合わせることで、無効な要素かどうかを調べることができます。同時に、HTMLGeolocationElement.invalidReason プロパティを介して無効な理由を返すこともできます。取りうる理由の完全なリストについては、そのページを参照してください。

スタイルの制約

<geolocation> 要素には、適用可能な CSS スタイルに関するいくつかの制約があります。これらの制約の一部は基本的なアクセシビリティを確保するために設計されており、遵守されない場合、ボタンが無効化されます。また、特定のプロパティに対して特定の値または値の範囲を強制するものもあります。

以下の項に掲載されていないプロパティ、または以下の項に掲載された物理的プロパティと論理的に同等なプロパティは、<geolocation> 要素に設定された場合、無視されます。

アクセシビリティの制約

次の制約が遵守されない場合、レンダリングされた <geolocation> ボタンは無効化されます（つまり、押しても何の効果もありません）。

• color と background-color の間の色のコントラスト比は、少なくとも 3:1 でなければならない。
• font-size は、small 値（キーワード値の場合）またはその計算値（その他の型の値の場合）よりも小さくしてはならない。

値の制約

以下の CSS プロパティ値の制約が <geolocation> 要素に適用されます。<geolocation> 要素に対してこれらのプロパティを掲載されている制約外の値に設定しようとすると、値は制約値に等しく調整されます（ちょうどの値制約の場合）。または、計算された値の上限または下限に最も近い値に等しく調整されます（範囲の制約の場合）。

opacity

1.0

line-height

normal

white-space

nowrap

user-select

none

appearance

auto

box-sizing

content-box

vertical-align

middle

text-emphasis

initial

text-shadow

initial

outline-offset

0 以上。

font-weight

200 以上。

word-spacing

0 以上 0.5em 以下。

letter-spacing

-0.05em 以上 0.2em 以下。

letter-spacing

-0.05em 以上 0.2em 以下。

min-height

1em 以上。

max-height

3em 以下。none は受け入れられる値です。

min-width

fit-content の計算値以下。

border-width

1em 以下。

複雑な制約

次の制約は単純な値制約よりも複雑なものです。

ブロック方向のパディング

block-size が auto に設定されている場合、padding-block-start および padding-block-end （および現在の書字方向に対応する物理的プロパティ）は最大 1em に制約され、かつ等しくなければならない。

インライン方向のパディング

inline-size が auto に設定されている場合、padding-inline-start および padding-inline-end （および現在の書字方向に対応する物理的プロパティ）は最大 5em に制約され、かつ等しくなければならない。

通常設定が可能なプロパティ

以下の CSS プロパティは通常通り使用できます。

• font-kerning
• font-optical-sizing
• font-stretch
• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-feature-settings
• forced-color-adjust
• text-rendering
• align-self
• anchor-name
• aspect-ratio
• border, border-top, border-right, border-bottom, border-left
• clear
• color-scheme
• contain-intrinsic-width
• contain-intrinsic-height
• container-name
• container-type
• counter-reset, counter-increment, counter-set
• flex, flex-grow, flex-shrink, flex-basis
• float
• height
• isolation
• justify-self
• left
• order
• orphans
• outline, outline-color, outline-style
• overflow-anchor
• overscroll-behavior, overscroll-behavior-inline, overscroll-behavior-block, overscroll-behavior-x, overscroll-behavior-y
• page
• position
• position-anchor
• right
• scroll-margin, scroll-margin-top, scroll-margin-right, scroll-margin-bottom, scroll-margin-left
• scroll-padding, scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left, scroll-padding-inline-start, scroll-padding-block-start, scroll-padding-block-start, scroll-padding-inline-end, scroll-padding-block-end
• text-spacing-trim
• text-transform
• top
• visibility
• x
• y
• ruby-position
• user-select
• width
• will-change
• z-index

アクセシビリティ

<geolocation> 要素には、設定された言語で記述されたアクセシブル名が付けられています。同時に、スクリーンリーダーによってボタンとして認識されるよう、role が button に設定されています。

さらに、<geolocation> 要素の tabindex 属性はデフォルトで 0 が設定されているため、キーボードフォーカスに関しては実際の <button> 要素と同様に挙動を示します。

最後に、基本的なアクセシビリティ要件を適用するために<geolocation>要素に適用されるスタイル設定制約については、アクセシビリティの制約の節を参照してください。

例

基本的な使い方の例

この例では <geolocation> 要素を使用して現在の位置情報を取得し、ボタンの下にある <p> 要素内に表示します。また非対応ブラウザー向けに通常の <button> による代替手段を実装し、位置データ取得を保証しています。

HTML

<geolocation> 要素を含み、その内部に <button> による代替処理を内包します。これは <geolocation> に対応していないブラウザーで表示されます。また位置情報データやエラーを出力するための <p> 要素も同時に配置します。

<geolocation>
  <button id="fallback">位置情報を使用</button>
</geolocation>
<p id="output"></p>

JavaScript

このスクリプトでは、まず出力用 <p> 要素への参照を取得します。次に typeof HTMLGeolocationElement === "function" を検査し、<geolocation> 要素に対応しているかどうかを判定します。

• 対応している場合、まず <geolocation> 要素への参照を取得し、次に location イベントリスナーを追加します。 ボタンが押されデータが取得されると、リスナーは（緯度、経度）座標を出力先の <p> に表示します（position プロパティから取得）。データ取得に失敗した場合はエラーメッセージを表示します error プロパティから取得）。
• 対応していない場合、代替の <button> 要素への参照を取得し、同じデータを取得して出力しますが、ボタンに click イベントリスナーを適用し、データを取得するために Geolocation.getCurrentPosition() 呼び出しを使用している点が異なります。

const outputElem = document.querySelector("#output");

if (typeof HTMLGeolocationElement === "function") {
  const geo = document.querySelector("geolocation");
  geo.addEventListener("location", () => {
    if (geo.position) {
      outputElem.textContent += `(${geo.position.coords.latitude},${geo.position.coords.longitude}), `;
    } else if (geo.error) {
      outputElem.textContent += `${geo.error.message}, `;
    }
  });
} else {
  const fallback = document.querySelector("#fallback");
  fallback.addEventListener("click", () => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        outputElem.textContent += `(${position.coords.latitude}, ${position.coords.longitude}), `;
      },
      (error) => {
        outputElem.textContent += `${error.message}, `;
      },
    );
  });
}

結果

このコードをライブ実行（ソースコード）で確認できます。この例には、<geolocation> 要素に watch 属性を記載したバージョンも存在します。これにより、ユーザーの端末位置が変更されるたびに位置データを取得します（ライブ実行 およびソースコードも参照してください）。

可能であれば、対応しているブラウザーと非対応のブラウザーでデモを表示し、geolocation を使用する際に許可または拒否することができる権限ダイアログのフローの違いを確認してください。

位置情報データを使用して地域のマップを作成する、より完全な例の詳細な手順については、 HTMLGeolocationElement リファレンスページを参照してください。

技術的概要

仕様書

ブラウザーの互換性

関連情報

• HTMLGeolocationElement
• geolocation 権限ポリシー
• 位置情報 API
• 権限 API
• <geolocation> HTML 要素の導入 - developer.chrome.com (2026)