ウェブサイト向けの無料位置情報ウィジェット

ウィジェットとは — 30秒で分かるデモ

What Is My Locationのウィジェットは、iframeで自分のサイトに埋め込める、単体で完結した小さなページです。訪問者が現在地を表示をタップすると、ブラウザが許可を求め、位置は訪問者の端末上で計算され、複数の形式の座標、逆ジオコーディングした住所、OpenStreetMapのピンが表示されます。訪問者について当サイトが保存するものは何もありません — Cookieも、アクセス解析のビーコンも、フィンガープリントの採取もありません。訪問者に見えるものとまったく同じ画面は実際に動くウィジェットのページで確認でき、自分のサイト用の設定は埋め込みビルダーで調整できます。

1行で埋め込む

ウィジェットを表示したい場所に、次のコードを貼り付けてください。

<iframe src="https://whatismylocation.ai/widget"
        width="100%" height="420" style="border:0;border-radius:12px"
        allow="geolocation" title="What is my location"></iframe>

allow="geolocation"属性は必須です — これがないと、ブラウザはiframe内での位置情報の取得をブロックします。高さは380〜460 pxがほとんどのレイアウトに合います。ウィジェットは幅280 pxまで縮んでも表示が崩れません。

設定できるオプション

埋め込みビルダーがURLを生成してくれますが、パラメータは手で書けるほど単純です。サイトに合わせて?theme=darkまたはlightを指定し（省略すると訪問者のシステム設定に従います）、フィート／マイル表示には&units=imperial、ラベルの言語には&lang=es（当サイトが対応する35言語のいずれか）を指定します。例えば/widget?theme=dark&lang=hiなら、ダークテーマのウィジェットがヒンディー語で表示されます。パラメータは自由に組み合わせられ、ほかに必要なものはありません — キーもアカウントも利用上限もありません。

WordPress、Shopify、Wix、React

• WordPress：小さなWPプラグイン（[whatismylocation]ショートコードを追加します）を使うか、カスタムHTMLブロックにiframeを貼り付けます。
• Shopify / Wix / Squarespace：どのビルダーにも「埋め込み／カスタムHTML」の要素があります — 同じiframeの1行を貼り付けてください。
• React / Vue / Svelte：iframeをそのまま描画してください。状態を持たないので、ライフサイクルの処理は不要です。
• AMPやメール：位置情報を使うiframeはそこでは動きません — 代わりに通常のページへリンクしてください。

誰が位置情報ウィジェットを使うのか — 実際の活用例

• 配送・物流のページ：分かりにくい住所でも、購入手続きの前に正確な座標を顧客自身に取得してもらえます。
• 旅行・アウトドアのブログ：読者が、紹介した登山口やルート地図に対して自分が今どこにいるかを確認できます。
• イベント・会場のサイト：アプリを入れてもらわなくても「ここからどれくらい？」に答えられます。
• 現場作業・測量のチーム：どのスマートフォンでもGPS座標を確認できる、ブックマークしておけるページになります。
• ITヘルプデスク：サポートの通話中に、離れた場所にいる利用者のおおよその位置とタイムゾーンをすばやく確認できます。

埋め込んでも安全な理由 — プライバシー設計

位置情報の取得は訪問者のブラウザ内だけで行われ、しかも訪問者が自分でタップしたときにしか始まりません。そのため、ウィジェットを埋め込んでもGDPRの処理義務で頭を抱えることにはなりません。ウィジェット自体はCookieを一切設定せず、サードパーティのトラッカーも一切動かさないので、そのための同意バナーは不要です。逆ジオコーディングの照会は座標を保存せずに当サイトのサーバー経由で行われ、プライバシーガイドでデータの流れ全体を説明しています。また、フレーム内に表示できるのは当サイトでこのウィジェットのページだけなので、利用者が他のツールでクリックジャッキングされる心配もありません。あとから画面ではなくプログラムからのアクセスが必要になった場合も、無料の開発者向けAPIに同じ保証が当てはまります。

ウィジェットとAPI — どちらが必要？

まずはウィジェットから始めて、自分のコードの中で生の数値が必要になったらAPIに移行しましょう。