使用 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>