デベロッパーは自社のウェブサイトに Waze ライブマップを埋め込むことができます。ライブマップでは、Waze のリアルタイムの地図データに基づいて場所を検索し、リアルタイムの交通情報を確認できます。
iFrame を使用して Waze ライブマップをウェブサイトに埋め込み、出力が次のようになるようにします。
デフォルトでは、ライブマップの左下に、この地図の検索オプションと経路オプションへのリンクが表示されます。
その他のライブマップ設定オプションの例については、例をご覧ください。
Waze ライブマップで iFrame を埋め込むには:
- ウェブページをテキスト エディタで開きます。
- ウェブページに iframe を生成するには、iframe コードをウェブページに追加します。
- Waze ライブマップを開き、検索バーで現在地を検索するか、ズームインして地図の特定の区間をクリックします。
- 地図の右下にある共有アイコン
をクリックします。 ポップアップに、カスタマイズされた埋め込みコードが表示されます。コードをコピーしてウェブページの本文内に貼り付けます。
例
次の例は、ライブマップをウェブサイトに埋め込む方法を示しています。ユースケースに合わせて URL パラメータを更新します。
<iframe src="https://embed.waze.com/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
iFrame をレスポンシブなウェブサイトに埋め込むには、一般的な CSS の手法を使用し、画面サイズに基づいて iFrame サイズを自動的に設定することをおすすめします。
URL パラメータ
次の表に、Waze iFrame のパラメータを示します。
| パラメータ | 必須 / 任意 | 説明 |
|---|---|---|
desc |
任意 | このパラメータを任意の値に設定すると、ライブマップに説明テキスト ブロックが表示されます。放送局はこのテキストを使用して、Wazer に最新の情報を提供できます。ラジオ局のウェブサイトを手動で更新する必要はありません。すべてのテキストは Waze によって作成され、コンテンツが正しいことを確認します。 |
lat |
必須 | 地図の中心点の緯度。 |
lon |
必須 | 地図の中心点の経度。 |
pin |
任意 | 1 に設定すると、地図の中心にピンが配置されます。例: <iframe src="https://embed.waze.com/iframe? zoom=12&lat=45.6906304&lon=-120.810983&pin=1" width="300" height="400"></iframe> |
zoom |
必須 | 開いたときの地図の拡大レベル。 最小値は 3（最小倍率）です。最大値は 17（最大倍率）です。 |
ローカライズ
デフォルトの言語コードは英語です。詳しくは、iFrame のローカライズをご覧ください。
次の例は、表示言語を変更する方法を示しています。
<iframe src="https://embed.waze.com/fr/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
ガイドライン
Waze ライブマップをサイトに埋め込むには、以下のガイドラインに従ってください。
- どのような方法でも、Waze 以外の地図の使用と Waze を関連付けてはいけません。
- Waze 以外の地図では、Waze ブランドの素材（ロゴ、アイコンなど）を使用しないでください。
例
次の例では、パラメータを組み合わせてさまざまな視覚要素をライブマップに追加しています。
例 1
次の iframe の実装では、地図のピンを表示します。
ニューヨーク、マンハッタン（ピン留めを使用）:
iframe では次のコードを使用します。
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=40.78247&lon=-73.97105&pin=1"
width="100%" height="520"></iframe>
例 2
次の iframe の実装では、マップのピンに説明テキストが含まれています。
サンパウロ（ピンと説明付き）:
iframe では次のコードを使用します。
<iframe src="https://embed.waze.com/iframe?zoom=14&lat=-23.55052&lon=-46.63331&pin=1&desc=1"
width="100%" height="520"></iframe>
例 3
次の iframe の実装では、地図のピンを表示します。
フランス、パリ（PIN を使用）:
iframe では次のコードを使用します。
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=48.85661&lon=2.35222&pin=1"
width="100%" height="520"></iframe>
Waze デベロッパー コミュニティに問い合わせる
詳細については、 Waze デベロッパー コミュニティ フォーラムの会話にご参加ください。