マップブロック：住所を隠さずに場所を表示する

マップブロックは、訪問者が実際の場所の位置を理解し、閲覧からナビゲーションに移行するのに役立ちます。その永続的なコンテンツはHTML内の確認済み住所であり、視覚的なマップはオプションの位置確認補助です。デフォルトの実装では、マップ領域を予約し、軽量な静的フォールバックを表示し、訪問者が要求した場合にのみ承認されたインタラクティブプロバイダーを読み込みます。

ナショナルギャラリー
Trafalgar Square, London WC2N 5DN, United Kingdom
マップは読み込まれていません。 マップアプリで場所を開くか、周辺の通りを確認する必要がある場合は「インタラクティブマップを読み込む」を有効にしてください。

このレンダリングされたファサードは、サードパーティへのリクエスト前に有用です。場所を指名し、住所を選択可能なテキストとして表示し、未読み込み状態を説明し、外部マップを開くか埋め込みマップを意図的に読み込むという2つの明確なルートを提供します。

この要素が重要な理由

ロケーションに関する質問は実用的です。訪問者は、支店が十分に近いかどうかを判断している場合、線路のどちら側にあるかを確認している場合、正しい入り口を探している場合、または公共交通機関と駐車場を比較している場合があります。マップは、馴染みのない住所を空間的なコンテキストに変換するための頭脳労働を軽減します。近くのランドマークや道路の関係性を、段落よりも速く視覚化できます。

その利便性は、マップを情報の真実の源泉とするものではありません。訪問者は住所をコピーしたり、他の人に送信したり、支援技術で読み取ったりすることがあります。マップタイルはそれらのアクションを確実にサポートできず、データの弱さ、プライバシー設定、またはプロバイダーの障害によってブロックされる可能性があります。住所はマップがなくても有用であり続ける必要があります。

埋め込みマップは、iframe、JavaScript、フォント、画像、およびサードパーティリクエストを追加する可能性があります。これらのリソースはページの回答と競合し、IPアドレスを開示したり、同意が必要なストレージを開始したりする可能性があります。マップを決して使用しない訪問者がそのコストを負担すべきではありません。

機械による抽出可能性とは、ソフトウェアがマップのピクセルを解釈したりプロバイダーを実行したりせずに場所を識別できることを意味します。検索クローラー、AIシステム、スクリーンリーダー、翻訳ツール、およびローカルデータパイプラインには、場所名、完全な住所、適用される場合は座標、およびHTMLまたは構造化フィールド内の安定した宛先リンクが必要です。iframe URLは信頼できる住所ではありません。プロバイダーのラベルは変更される可能性があり、ピンがわずかにずれていることもあります。同じ確認済みのロケーションレコードが、表示される住所、マップマーカー、ナビゲーションリンク、および該当する構造化データに提供されるべきです。

要素作成ルール が優先されます：目的に応じて型付き要素を選択し、外観で選ばないでください。目的が1つの確認済み場所の周りの空間的な位置確認である場合は、マップブロックを使用してください。目的が連絡先詳細の公開である場合は、営業時間・連絡先ブロック またはNAPブロック を使用し、マップに同じ住所レコードを消費させてください。目的が時間の予約である場合は、予約ブロック を使用してください。

使用するタイミング

場所をその周辺環境とともに見ることが、読者のロケーション依存タスクの完了に役立つ場合にマップブロックを使用してください。代表的な用途としては、ショップ、オフィス、クリニック、会場、受け取り場所、ショールーム、ホテル、観光名所、支店、イベント入り口、またはサービスエリアの境界などがあります。特に、入り口が郵便上の住所と異なる場合、周辺道路がわかりにくい場合、アクセシビリティ経路の説明が必要な場合、または公共交通機関や駐車場が訪問に影響する場合に有用です。

プロバイダーの最初のジオコーディング結果を受け入れるのではなく、実際の入り口またはサービス拠点に対してマーカーを確認してください。より大きな建物内の場所については、階数、ユニット、または入り口をテキストで明記してください。

類似しているが見分けがつきにくいケースでは、魅力的だが役に立たないマップが作成されることがよくあります。

• サービス提供都市のリスト： これはサービスエリアの表明であり、物理的な場所の証明ではありません。市中心部にピンを落としてオフィスがあると暗示しないでください。
• 訪問者アクセスのない郵送専用住所： 郵送先詳細を公開し、訪問ができないことを明記してください。マップはサポートされていない来訪アクションを暗示することになります。
• リモートまたはオンライン専用の会社： 登記上のオフィスは法的に関連する場合がありますが、埋め込みがその場所を特定できるからといって、顧客の目的地になるわけではありません。
• ターンバイターンの道順： ナビゲーションプロバイダーにリンクし、ルート固有の注意事項を提供してください。静的な埋め込みマップは、交通状況、閉鎖、または訪問者の出発地点を考慮できません。
• 多数の拠点： テキストによる結果リストを備えたロケーションファインダーを使用してください。ピンの集まりは個別の支店ページを代替できません。
• ローカルプレゼンスの証明： マップはそこでチームが活動しているという証拠にはなりません。一貫したアイデンティティ、住所、連絡先、営業時間、および支店固有のコンテンツで主張を裏付けてください。
• 装飾的な地理的コンテキスト： 場所がタスクに影響しない場合は、マップを省略してください。都市のスカイラインや地域の輪郭は、別の視覚的目的に属します。

配置する場所

マップは、場所名、完全な住所、および訪問に重要な修飾子の直後に配置してください。ロケーションページでは、通常の順序は、導入、住所と連絡先情報、マップ、到着に関する注意事項、営業時間、そして訪問または予約アクションです。道順が主要な回答である場合は、マップの前に道順を要約してください。

住所、マップファサード、読み込みコントロール、フォールバックリンク、キャプション、および道順メモを1つのラベル付き領域にまとめてください。訪問者は、推薦文やマーケティングセクションを横断しなくても、ピンに属する住所を見つけられる必要があります。「道順を表示」リンクは、表示されているマーカーと同じ座標または場所識別子を使用する必要があります。

ブロックは同じ支店の営業時間の近くに配置しても問題ありませんが、矛盾する住所、別のマップ、自動再生動画、またはコントロールのように装飾された広告の隣に配置しないでください。カルーセル、アコーディオン、必須モーダル、非表示タブ、または狭いテーブルセル内に配置しないでください。

警告とそれが修飾する指示の間、または予約アクションとその前提条件の間にマップを配置しないでください。重要な住所テキスト、同意文言、または唯一の道順リンクをマップタイルの上に重ねないでください。モバイルでは、場所名、住所、訪問修飾子、フォールバック、読み込みコントロール、マップ領域、そして道順の順序を維持してください。

構成要素

1. 場所名： マーカーが表す支店、会場、または目的地を識別します。
2. 完全なテキスト住所： 場所を特定するために必要なすべての住所行、地域、郵便番号、国を含みます。
3. 訪問修飾子： 入り口、ユニット、階数、予約要件、訪問者制限、または到着に影響するアクセシビリティ情報を記載します。
4. 予約済みビューポート： インタラクティブリソースが読み込まれる前に幅とアスペクト比を固定し、レイアウトの移動を防ぎます。
5. 静的フォールバック： スクリプトなしで有用な空間コンテキストを提供します。参照される前に実際に生成されたアセットである必要があります。
6. マーカー： 確認済みの到着地点を表し、単なる郵便番号や行政上の中心点ではありません。
7. 読み込みコントロール： 「ナショナルギャラリーのインタラクティブマップを読み込む」などの具体的なアクセシブル名を持つ実際のボタンです。
8. プロバイダー通知： サードパーティの名称を明記し、アクティブ化により接続が発生する可能性があることを説明します。
9. 道順リンク： 埋め込みプレーヤーを必要とせずにナビゲーションのための安定したHTTPS宛先を開きます。
10. キャプションまたはランドマークメモ： 指定された通りに面した入り口など、マップの有用な結論を説明します。
11. ロケーションレコード： 管理された座標、場所識別子、および検証日をレンダラーに提供します。
12. 障害状態： プロバイダーが読み込めない場合に、住所、道順リンク、および再試行オプションを保持します。

デザイン例

すべてのバリエーションは、住所をHTMLに保持し、マップの寸法を予約し、直接の道順リンクを提供します。読み込み動作のみが異なります。

外部道順付き静的マップ — 最小コスト

位置確認に役立つが、パンやズームが不要な場合は、最適化されたマップ画像を使用してください。代替テキストは空間的な結論を伝え、キャプションはランドマークを記載します。アセットが存在した後にのみパスを公開してください。

クリックして読み込むインタラクティブマップ — デフォルト

最初に静的フォールバックまたはニュートラルな予約済みパネルを表示します。明示的なアクティブ化後にボタンが承認されたiframeを読み込みます。これによりページ速度が保護され、サードパーティ接続が意図的になりながら、必要に応じてパン、ズーム、ストリート表示が可能になります。

同意ゲート付きマップ

サイトのプライバシーポリシーがプロバイダーとの接触前に同意を必要とする場合に使用してください。結果を平易な言葉で説明し、同意なしで道順リンクを提供してください。拒否しても住所が隠れたり、ページの残りの部分が機能しなくなったりしてはいけません。

常時読み込みインタラクティブマップ — 測定済み例外

インタラクションが中心的であり、プロバイダーとの接触が許可され、フィールド測定がコストを受け入れる場合にのみ使用してください。訪問者が近づくにつれて遅延読み込みを初期化することも可能です。loading="lazy"ではプロバイダーの障害を防げないため、サーバーレンダリングされたフォールバックを維持してください。

ロケーター内の単一ロケーションブロック

複数拠点ページの場合、選択されたマップをテキスト結果リストとペアにしてください。選択された1つの支店を読み込むことでインタラクションが理解しやすくなり、選択を変更すると場所名、住所、マーカー、道順リンクが一緒に更新されます。リストはマップがなくても使用可能です。

パラメータ

「ソース」とは、レンダラーが作成者の値を取得する場所を意味します。権威あるロケーションシステムは、実際の住所と座標の検証に責任を持ち続けます。

レンダラーは、許可リストに登録された識別子と数値座標からプロバイダーURLを構築する必要があります。作成者は任意のiframe HTML、APIキー、アクセストークン、またはJavaScriptを本文に貼り付けてはいけません。小数点以下6桁は、訪問者が通常必要とするよりもはるかに精密に地点を特定します。正確なプライベート入り口を公開することが安全性やプライバシーのリスクになる場合は、より少ない桁数を保持してください。

構文とコード例

これらのポータブルな例は、1つの標準的なコンテンツモデルを説明しています。プロジェクトは、作成者が本番環境で構文を使用する前に、対応するレンダラーを実装およびテストする必要があります。

ポータブルMarkdownディレクティブ

:::map{variant=facade place-id="north-street-clinic" latitude=51.454514 longitude=-2.587910 zoom=16 aspect-ratio="4/3" provider=osm directions-url="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified=2026-08-27}
## North Street Clinic

18 North Street, Bristol BS1 3PR, United Kingdom

Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
:::

最初の見出しがtitleを提供し、次の行が構造化された住所を提供し、残りの本文がキャプションまたは到着メモを提供します。

Hugoショートコードマッピング

名前付きパラメータのみを使用してください。この表記は意図されたアダプターを文書化するものであり、このリポジトリにマップショートコードが既に存在することを主張するものではありません。

{{< map variant="facade" placeId="north-street-clinic" latitude="51.454514" longitude="-2.587910" zoom="16" aspectRatio="4/3" provider="osm" directionsUrl="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified="2026-08-27" >}}
## North Street Clinic

18 North Street, Bristol BS1 3PR, United Kingdom

Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
{{< /map >}}

アダプターは比率を予約し、サーバー上で住所とフォールバックをレンダリングし、宣言されたトリガーの後にのみiframeを作成する必要があります。作成者コンテンツにプロバイダーAPIキーを公開してはいけません。

WordPressブロック

<!-- wp:amicited/map {"variant":"facade","placeId":"north-street-clinic","latitude":51.454514,"longitude":-2.587910,"zoom":16,"aspectRatio":"4/3","provider":"osm","directionsUrl":"https://www.openstreetmap.org/directions?to=51.454514,-2.587910","verified":"2026-08-27"} -->
<h2>North Street Clinic</h2>
<address>18 North Street, Bristol BS1 3PR, United Kingdom</address>
<p>Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.</p>
<!-- /wp:amicited/map -->

ネイティブブロックは、座標を数値として保存し、住所フィールドを構造化して保持し、プロバイダーを検証し、安全なサーバーサイドファサードをレンダリングする必要があります。エディタープレビューでは、完全なプロバイダーを初期化するのではなく、静的な表現を表示する場合があります。

良い例と悪い例

良い例

North Street Clinic
18 North Street, Bristol BS1 3PR, United Kingdom
Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
Load interactive map · Open directions in a map app

これは、訪問者が埋め込みなしで場所を特定、コピー、およびナビゲートできるため機能します。入り口メモは実際の到着時の曖昧さを解決します。サードパーティの読み込みは選択であり、両方のアクションは何が起こるかを明確に示しています。

悪い例

こちらで見つけてください！
[全幅インタラクティブマップ、ラベルのないピン]

これは、「こちら」が場所を特定しておらず、住所がプロバイダーのピクセル内にのみ存在し、ピンが入り口ではなく郵便番号を表している可能性があるため失敗しています。早期読み込みマップは、マップを使用しない訪問者にとってもコストを追加します。フォールバック、検証日、到着メモ、またはアクセシブルなナビゲーションリンクはありません。iframeのtitleに住所を追加するとフレームラベルは改善されますが、選択可能なページテキストは作成されません。

スキーママークアップとアクセシビリティ

マップブロックには専用のSchema.orgタイプはありません。検証済みフィールドは、ページがそのエンティティを表す場合に、適切なOrganization、LocalBusinessサブタイプ、Place、PostalAddress、またはGeoCoordinatesに提供されることがあります。1つの共有ロケーションレコードを使用してください。表示される住所、マーカー、正規の支店URL、およびJSON-LDは一致している必要があります。

ページをより完全に見せるためだけにhasMapを追加しないでください。使用する場合、同じ場所への安定したマップURLを指すべきであり、期限切れのセッションURLや露出したキーを持つiframeエンドポイントを指すべきではありません。公開された顧客拠点のないサービスエリアビジネスは、サービスエリアを正直に説明し、架空の施設や過度に正確なプライベート座標を公開してはなりません。

アクセシビリティはマップからの独立性から始まります。場所名と完全な住所をHTMLに配置し、関連する連絡先情報にのみ<address>を使用してください。通常の道順リンクを提供してください。入り口、ランドマーク、交通機関、駐車場、段差のないアクセスをテキストで説明してください。静的マップの代替テキストは、すべての通りを列挙するのではなく、有用な結論を伝えるべきです。

読み込みコントロールは、キーボード操作可能な<button>で、可視フォーカスと場所に関連付けられたアクセシブル名を持つ必要があります。読み込み時にフォーカスが予期せず移動してはいけません。アクティブ化後は、「インタラクティブマップを読み込みました」などの短いステータスを通知し、その後、開始コントロールにフォーカスを維持するか、インターフェースに文書化されたキーボードエントリポイントがある場合にのみ移動してください。各iframeに一意のタイトルを付けてください（例：「North Street Clinicのインタラクティブストリートマップ」）。

プロバイダーコントロールは、狭い幅および200%ズームでも操作可能でなければなりません。iframe内にキーボードフォーカスを閉じ込めないでください。重要な情報をピンの色、ドラッグジェスチャー、ホバー、または視覚的なストリートラベルに依存しないでください。マップが失敗した場合や同意が拒否された場合は、予約済み領域を安定に保ち、住所、到着メモ、外部道順リンク、および再試行アクションを公開してください。

作成ルール

2〜10語の公式な公開場所名で始めてください。管理されたロケーションレコードに保存されている完全な郵便住所を続けてください。正しい入り口に到達するために必要なユニット、建物、地域、または郵便番号を省略しないでください。ページが国際的なトラフィックを受信する可能性がある場合、または都市名が曖昧な場合は国を含めてください。

訪問者の行動を変える場合にのみ、8〜35語の到着メモを1つ追加してください。耐久性のあるランドマークや入り口の関係を名称で示してください：「薬局の隣の中庭入口をご利用ください」は有用ですが、「見逃しようがありません」は有用ではありません。時間に敏感な道路閉鎖、工事経路、および一時的な入り口については、コンテンツシステム内の別の場所に所有者とレビュー日を設定してください。

1つの選択された目的地に対して1つのマップブロックを使用してください。ロケーターがその目的地を切り替えることはありますが、すべての選択状態はタイトル、住所、マーカー、キャプション、およびリンクをアトミックに更新する必要があります。デフォルトでは1つのプライマリマーカーを表示してください。二次的なランドマークは、到着の説明に役立ち、テキストとコントロールで視覚的に区別できる場合にのみ表示してください。

コントロールラベルは具体的にしてください：「インタラクティブマップを読み込む」、「道順を開く」、「アクセシブルな入り口を表示」。 「探索」、「もっと見る」、「ここをクリック」などの曖昧なラベルは避けてください。接続にプライバシーの影響がある場合は、アクティブ化前にプロバイダーを明記してください。

インタラクティブキャンバス内に電話番号、営業時間、プロモーションの主張、レビュー、価格、予約フォーム、または長い駐車場ポリシーを決して配置しないでください。それらの情報はHTML内および独自の型付き要素に属します。APIキー、ユーザーの現在位置、プライベートな住宅入り口、架空のオフィスピン、未確認のサービスエリア、または未チェックのジオコーダーからコピーした座標を決して公開しないでください。マップは存在しない訪問者アクセスを暗示してはなりません。

公開時、場所変更後、および定期レビュー時に住所とマーカーを検証してください。プロバイダーの道路やラベルは独立して変更される可能性があります。組織は依然としてロケーションレコードと到着手順の正確性に責任を持ちます。

これを使用する投稿タイプ

postTypesフロントマター項目がこの実装マトリックスのソースです。

QAチェックリスト

• 場所名と完全な住所が、マップの外部で選択可能なサーバーレンダリングテキストとして表示されている。
• マーカーが、郵便番号や建物の重心ではなく、確認済みの公開到着地点を指している。
• 住所、座標、場所識別子、道順リンク、構造化データが同じ管理レコードから取得されている。
• ブロックが、到着に必要なユニット、階、入り口、予約ルール、またはアクセシビリティ経路を説明している。
• デフォルトの実装では、明示的なアクティブ化または有効な同意までサードパーティリクエストを回避している。
• 常時読み込みの例外には、文書化された目的、プライバシーの根拠、測定されたパフォーマンスバジェットがある。
• 画像、iframe、またはプロバイダーコードが読み込まれる前に、幅とアスペクト比が予約されている。
• 静的画像パスは、実際の承認済みアセットを指し、有用な代替テキストがある。
• 読み込みコントロールは、場所固有のアクセシブル名と可視フォーカスを持つボタンである。
• iframeは、作成時に一意の説明的なタイトルを持ち、キーボードフォーカスを閉じ込めない。
• 住所、道順リンク、到着メモ、再試行パスは、スクリプト、同意、またはプロバイダーが失敗しても使用可能である。
• 重要な情報は、ピンの色、ホバー、ドラッグ、ズーム、またはマップラベルに依存しない。
• レイアウトは、狭い幅および200%ズームでも、プロバイダーコントロールを覆わずに機能する。
• ページは、組織が検証できない公開オフィス、入り口、またはサービスエリアを主張していない。
• APIキー、アクセストークン、ユーザーの位置情報、プライベート座標、または任意のiframe URLが作成者コンテンツに含まれていない。
• 複数拠点の実装では、キーボードアクセス可能なテキストリストを保持し、選択された支店をアトミックに同期する。
• スキーマが存在する場合、訪問者に表示される実際のエンティティと住所を同じものを記述している。
• 検証日とレビュー担当者が、サイトのローカルデータメンテナンスポリシーを満たしている。

マップブロックは、マップが失われたときに利便性は変わっても、意味が変わらない場合に成功しています。読者は依然として場所、そこへの行き方、期待すべきことを把握しており、プロバイダーはオプションのままです。