どのサイトでも地図ウィジェットを埋め込む方法

ビルダーから始める（実作業はここだけ）

すべては地図埋め込みビルダーから始まります。ジオコーディングはそこで一度だけ行われます。コピーするスニペットには固定された座標が入るので、ジオコーダーの障害や「住所の正規化」で後からピンが動くことはありません。住所を入力してピンが落ちるのを確認し、コピーする前に実際の入口までピンをドラッグしてください。この10秒のドラッグが、「正しい通り」と「正しいドア」の違いになります。

作り始める前に、完成した複数拠点の例を見てみますか？ ビルダーのデモを開く——住所付きの3拠点のサンプル企業、色分けされた番号付きピン、そしてプレビュー上で動く拠点パネルが読み込まれ、すぐに触れます。

WordPress：プラグインのショートコードか、生のiframeか？

どちらの方法でも同じウィジェットになります。好みで選んでください。

プラグインを使う方法（推奨）： whatismylocation-widget.zip をダウンロード → wp-admin ▸ プラグイン ▸ 新規追加 ▸ プラグインのアップロード → 有効化。次にショートコードブロックを追加します：

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

属性はビルダーのオプションと同じように読めます：theme、marker、zoom、height、directions、拠点には pins="lat,lng,Label~Address|…" と panel=、motion=（下のリファレンス表を参照）。ビルダーのWordPressセクションが完全なショートコードを生成するので、手で打つ必要はありません。

プラグインなしの方法：ビルダーのiframeをカスタムHTMLブロックに貼り付けます。同じウィジェットで、更新するプラグインもありません。代わりに本文のマークアップが長くなり、後から属性で編集することはできません。

Squarespace、Shopify、Notion——そしてそのほか

WordPress以外では、たいてい1回の貼り付けで済みます。プラットフォームのHTML／埋め込み要素（WixのHTMLを埋め込む、Squarespaceのコードブロック、WebflowのEmbed）を追加し、iframeを入れるだけです。地図ウィジェットが位置情報ウィジェットより簡単な点が1つあります：allow="geolocation"属性が要りません。訪問者に何も求めないからです。だからページビルダーがHTMLを書き換えても、守るべき壊れやすい部分がありません。

Squarespace：コードブロックを追加して貼り付けます。先に知っておくとよい注意点が1つ：コードブロックにはBusinessプラン以上が必要です。Personalプランでは、ブロックがコードを描画せず、そのままテキストとして表示します。

Shopifyには貼り付けよりよい方法があります：すぐ使えるテーマセクションを用意しています。テーマにファイルを1つ入れるだけで、ネイティブの設定パネルが使えます。拠点はドラッグで並べ替えられるブロックになり、アプリもAPIキーも不要です。

NotionとGoogleサイトはHTMLではなくURLで埋め込みます。iframeのスニペットはまったく受け付けません。代わりにビルダーでウィジェットURLをコピーを押し、Notionの/embedブロックや、Googleサイトの埋め込み ▸ URLに貼り付けてください。ウィジェットは単体で完結したページなので、どちらでも問題なく表示されます。

Salesforce Experience Cloud（公開コミュニティサイト）：iframeをHTMLエディターコンポーネントに入れます。そのうえで管理者に、設定 ▸ 信頼済みURLでwhatismylocation.aiを追加し、frame-srcのCSPディレクティブを指定してもらってください。これをしないと、Salesforceは何も告げずにフレームをブロックします。コードで作るチームは、同じURLを10行ほどのLightning Web Componentに包めます：

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

複数拠点：拠点パネル

1つの埋め込みに最大10か所まで入ります。ビルダーの詳細モードで各ピンの位置を決め、ラベルと住所を付けて拠点を追加を押します。訪問者には拠点パネルが表示されます——デスクトップでは地図の横のアコーディオン、スマートフォンではスワイプできるカードの帯です。ピンには番号が付き、拠点を選ぶと地図がそこへ飛び、その住所と専用のルート案内リンクが表示されます。

• panel=でレイアウトを選びます：auto（既定——幅の広いiframeでは横、狭ければ帯）、side、bottom、またはピンとポップアップだけにするnone。
• motion=で切り替えのアニメーションを設定します：smooth（既定の飛行）、fade、lively、none。システムで「視差効果を減らす」を設定している訪問者には、何を選んでも常に即時表示になります。
• open=noはすべての項目を折りたたんだ状態で始めます。地図は全拠点が収まるよう自動調整し、zoomは最大値になります。

オプション一覧

WordPressのトラブルシューティング

ショートコードがそのまま文字として表示される。そのブロックはショートコードを処理しません。ブロックエディターではショートコードブロックを使ってください（コードブロックや整形済みテキストのブロックではありません）。Elementorではショートコードウィジェット、Diviではコードモジュールを使います。クラシックエディターの場合は、ビジュアルタブにそのままテキストとして入力します。

何も表示されない。ページのソースを表示してwhatismylocationを検索します。lat/lngがないというHTMLコメントがあれば、座標が入っていないか無効です。属性を手で打つのではなく、ビルダーから完全なショートコードをコピーしてください。

保存するとiframeが消える（プラグインなしの場合）。WordPressはunfiltered_html権限のないユーザー権限のiframeを削除します。マルチサイトでは既定で管理者も含まれます。一部のセキュリティプラグインも同じことをします。プラグインのショートコードがすっきりした解決策です。生のiframeを保存できる権限に頼りません。

地図が灰色になる／タイルが読み込まれない。タイルはtile.openstreetmap.orgから配信されます。非常に強力な広告ブロッカーや社内ネットワークが遮断することがあります（オーバーレイのカードは表示されたままです）。別のネットワークや、モバイル回線のスマートフォンで確認してください。

拠点パネルが出ない。パネルはピンが2つ以上のときに表示されます。単一拠点ではおなじみのオーバーレイカードになります。panel="none"が設定されていないかも確認してください。

切り替えのアニメーションが動かない。ほぼ必ず、訪問者（またはあなた自身）のOSの「視差効果を減らす」設定が原因です。ウィジェットは設計上それを尊重し、即時に切り替えます。不具合ではありません。ほかの訪問者には、選んだプリセットがそのまま表示されます。

編集が反映されない。キャッシュプラグイン（またはホスティングのキャッシュ）が古いページを配信しています。ショートコードの属性を編集したら、ページキャッシュを削除してください。ウィジェット自体にキャッシュするものはありません。