使用 Waze iFrame

開發人員可以在自己的網站上嵌入 Waze 即時地圖。訪客可透過即時地圖搜尋地點，並根據 Waze 的即時地圖資料查看即時車流量更新。

您可以使用 iFrame 將 Waze 實況地圖嵌入網站，輸出內容如下所示：

根據預設，即時地圖會在左下角顯示連結，方便使用者搜尋地圖和規劃路線。

如需其他即時地圖設定選項的範例，請參閱「範例」。

如要嵌入含有 Waze 實況地圖的 iFrame，請按照下列步驟操作：

  1. 在文字編輯器中開啟網頁。
  2. 如要在網頁上產生 iFrame，請將 iFrame 程式碼新增至網頁。
  3. 開啟 Waze 即時地圖， 在搜尋列中搜尋你的位置，或放大地圖並點選特定區段。
  4. 按一下地圖右下角的「共用」圖示 。

  5. 系統應會顯示彈出式視窗，內含自訂的嵌入程式碼。複製程式碼並貼到網頁內文中。

範例

以下範例說明如何在網站中嵌入即時地圖。請根據您的用途更新網址參數。

<iframe src="https://embed.waze.com/iframe?zoom=12&lat=45.6906304&lon=-120.810983"
  width="300" height="400"></iframe>

如要將 iFrame 嵌入回應式網站，建議您使用常見的 CSS 技術，根據螢幕大小自動設定 iFrame 大小。

網址參數

下表說明 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 實作方式會顯示地圖指標。

紐約州紐約市曼哈頓 (使用 PIN 碼)：

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 開發人員社群論壇的討論。