使用 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 選用 可以將這項參數設為任何值，在線上地圖中顯示說明文字區塊。Broadcasters 可使用這段文字向 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 導入方式會顯示地圖圖釘。

法國巴黎 (含圖釘)：

iFrame 會使用以下程式碼：

<iframe src="https://embed.waze.com/iframe?zoom=13&lat=48.85661&lon=2.35222&pin=1"
            width="100%" height="520"></iframe>