サイトにモビリティマップをインターフェースを一から作成せずに組み込むには、ROOTEのiframeを利用してください。埋め込みはページに合わせて都市検索やフィルター（例えば自転車ガイドなら自転車、トイレガイドならトイレ、交通向けならバス・トラム）を受け付けます。
このガイドの例は embed.roote.ai を使用しています。これはROOTEのガイドに統合されているドメインです。一般的なドキュメントでは map.roote.ai の組み込みも説明し、カメラ位置と完全な検索パラメータを区別しています。
レスポンシブiframeを追加する
このコードはボルドーで自転車検索を開き、ズームレベルを15に設定します。URLはコード内で構築され、iframeのタイトルはスクリーンリーダー利用者に内容を示します。ページの言語に合わせてタイトルを調整してください。
<iframe
title="Carte ROOTE — vélos à Bordeaux"
src="https://embed.roote.ai/?q=Bordeaux&modes=bicycle&zoom=15"
width="100%"
height="480"
loading="lazy"
allow="geolocation"
style="display:block; width:100%; min-height:360px; border:0; border-radius:16px;"
></iframe>HTML属性内では区切り文字「&」は「&」と書きます。幅100%はコンテナ幅に従います。モバイルで使いやすい高さを保ち、必須の操作部を見えない領域に置かないようにしてください。
ページに合わせたモードを選択する
| 必要なもの | 埋め込み用パラメータ |
|---|---|
| 自転車 | modes=bicycle |
| トイレ | modes=toilets |
| バス | modes=bus |
| トラム | modes=tram |
| バスとトラム | modes=bus,tram |
| 自転車とトイレ | modes=bicycle,toilets |
これらの値はROOTEの埋め込み経路で、モビリティ・サービス・トランジット各ファミリーに対応します。ただしRESTパラメータの置き換えではなく、Servicesはtypes、Transitはmodesを使用します。都市中心のマップでも各ファミリーの結果が必ずあるとは限りません。
カメラ位置と検索起点を区別する
latとlonはカメラの位置を示しますが、近隣検索を作るのには不十分です。既知の検索を復元するには、search_lat、search_lon、search_labelを使い、modesやzoomと組み合わせてください。
https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tram上記の座標はボルドーの基準点であり、ユーザー位置ではありません。カメラパラメータを追加すれば別のエリアを表示しつつ距離計算の起点を維持できますが、この分離が目的の場合に限ってください。
特殊文字を失わずURLを作る
手動連結ではなくURLとURLSearchParamsを使ってください。これにより空白やアクセント、区切りが正しくエンコードされます。このコードはブラウザ側で、入力された場所からiframeのURLを作ります。
const embedUrl = new URL('https://embed.roote.ai/');
embedUrl.searchParams.set('q', 'Place des Quinconces, Bordeaux');
embedUrl.searchParams.set('modes', 'bicycle,toilets');
embedUrl.searchParams.set('zoom', '15');
document.querySelector('iframe').src = embedUrl.toString();完全なマップへの文脈を保持する
map.roote.aiへのリンクは、現在の検索状態を反映すべきです。パラメータ抜きURL再作成では都市やモード、ズームが失われるので、ページ更新で共通URLオブジェクトを使いましょう。
const fullMapUrl = new URL('https://map.roote.ai/');
fullMapUrl.search = embedUrl.search;
const link = document.querySelector('[data-open-map]');
link.href = fullMapUrl.toString();
link.target = '_blank';
link.rel = 'noopener noreferrer';このコードは親ページが知るパラメータを保持します。iframe内でユーザーが検索を変えても、親は異ドメインのURLを直接読み取れません。状態取得には、postMessageなど由来を検証した双方向通信の仕組みが必要です。埋め込みが提供しないイベント名は使用禁止です。
位置情報とモバイル操作の制御
allow="geolocation" はiframeが位置情報取得をリクエスト可能にしますが、サイトの許可方針とユーザー同意が条件です。拒否された場合でも都市検索は使えるべきです。到着時に位置情報要求を自動で行わないでください。
記事上でのカード有効化は、スクロールやズーム操作が読書中のジェスチャを奪わないようにします。コントロールはキーボード操作可能で明確なラベルをつけてください。向き変更や狭い画面表示も確認し、PC版だけでなく対応を。
結果と障害状態の検証
各フィルター、既知都市、データが少ない地域、無効検索、未対応ファミリーをテストしてください。マーカなしのマップだけで空結果か障害か判断しないで、埋め込みのメッセージと完全マップへのアクセスを用意しましょう。
よくある質問
iframeにAPIキーは必要？
ここで示した公開URLには含まれていません。URLやクライアント側コードに秘密情報を入れないでください。
zoom=15は検索半径を広げる？
ズームは表示範囲の調整です。APIクエリの検索半径とは異なるので、使うインターフェースの検索パラメータを確認してください。
親側はiframe内の変更を知っている？
親は自分が渡したパラメータは知っています。内部の変更は両ドメイン間のドキュメント化された通信が必要です。