デベロッパーは、Waze ライブマップをウェブサイトに埋め込むことができます。ライブマップを使用すると、訪問者は場所を検索し、Waze のリアルタイム マップデータに基づいてリアルタイム交通情報を確認できます。
Waze ライブマップをウェブサイトに埋め込むには、iFrame を使用します。出力は次のようになります。
デフォルトでは、ライブマップの左下隅に、この地図の検索オプションとルート検索オプションへのリンクが表示されます。
ライブマップの追加の構成オプションの例については、 例をご覧ください。
Waze ライブマップを含む iFrame を埋め込むには:
- テキスト エディタでウェブページを開きます。
- ウェブページに iFrame を生成するには、iFrame コードをウェブページに追加します。
- Waze ライブマップを開き、 検索バーで場所を検索するか、地図を拡大して特定の セグメントをクリックして場所を検索します。
- 地図の右下にある共有アイコン
をクリックします。 カスタマイズされた埋め込みコードを含むポップアップが表示されます。コードをコピーして、ウェブページの body セクションに貼り付けます。
例
次の例は、ライブマップをウェブサイトに埋め込む方法を示しています。ユースケースに合わせて 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 |
省略可 | このパラメータに任意の値に設定すると、ライブマップに説明テキスト ブロックが表示されます。 Broadcasters はこのテキストを使用して、Wazers に最新情報を提供できます。放送局のウェブサイトを手動で更新する必要はありません。すべてのテキストは 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 実装では、地図のピンが表示されます。
パリ（フランス）（ピン付き）:
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 デベロッパー コミュニティ フォーラムのディスカッションにご参加ください。