Google 地圖嵌入教學
在網站的「聯絡我們」或「門市資訊」頁面嵌入 Google 地圖,能讓訪客快速找到您的位置。本教學將帶您了解如何嵌入地圖、更換地圖以及切換地圖語言。
一、嵌入 Google 地圖
Step 1 搜尋地址
開啟 Google Map 網頁,在搜尋框輸入您的地址,並按下搜尋。

Step 2 點擊分享
確認地點無誤後,點選左側資訊欄的 分享 按鈕。

Step 3 複製 HTML 代碼
在分享視窗中:
1. 點選上方的 「嵌入地圖」 頁籤。
2. 點擊 複製 HTML。

Step 4 進入後台原始碼模式
點選編輯器工具列左上角的 原始碼 按鈕,並將剛剛複製的 HTML 代碼貼入。

Step 5 返回編輯模式
再次點擊 原始碼 按鈕,返回一般編輯畫面。此時您會看到一個 IFRAME 的地圖區塊。

Step 6 選取 IFRAME
將滑鼠移到 IFRAME 地圖區塊上,點擊 滑鼠右鍵。

Step 7 開啟屬性設定
在右鍵選單中,點擊 IFrame 屬性。

Step 8 設定 RWD 自適應寬度 (關鍵)
為了讓地圖在手機版能自動縮放,請務必將 寬度 (Width) 設定為 100%。
高度 (Height) 可依照您的需求填入數值(例如 450),設定完後按「確定」。

Step 9 儲存變更
確認預覽畫面正常後,按下後台下方的 儲存 按鈕即完成。

二、更換已嵌入的 Google 地圖
如果您的門市搬家了,或是想要修正地圖位置,其實不需要刪除舊地圖重新嵌入。只要透過「修改屬性」的方式更換網址即可。
Step 1 搜尋新地址
開啟 Google Map 網頁,在搜尋框輸入新的地址,並按下搜尋。

Step 2 點擊分享
確認新地點無誤後,點選左側資訊欄的 分享 按鈕。

Step 3 取得 HTML 代碼
在分享視窗中:
1. 點選上方的 「嵌入地圖」 頁籤。
2. 點擊 複製 HTML。

Step 4 取出地圖網址 (關鍵步驟)
請找到代碼中
src="https://..." 的部分,只複製引號內的 https 開頭網址 即可。
Step 5 更新網站地圖屬性
1. 將滑鼠移到原本的 IFRAME 地圖區塊上,點擊 滑鼠右鍵。
2. 選擇 「IFrame 屬性」。
3. 將步驟 4 複製的新網址,貼入 URL 欄位 中。
4. 按下 確定 並儲存頁面。

三、嵌入其他語言的 Google 地圖
如果您的網站客群包含外國人,您可以切換 Google Map 的介面語言,取得該語言版本的地圖代碼。
Step 1 更改介面語言
開啟 Google Map,點擊左上角的選單圖示(三條線),選擇 「語言」。

Step 2 重新取得嵌入代碼
切換語言後,請重新執行 「分享 > 嵌入地圖」 的動作。地圖預覽視窗會變換介面語言。

Step 3 繼續完成嵌入
複製好新的 HTML 代碼後,請回到「第一部分」的 Step 4 完成後續步驟。
恭喜完成!現在您的網站已經擁有專業的 Google 地圖導覽功能囉。