重點整理
把 Google 地圖嵌入網站只要 3 步：在 Google 地圖找到地點 → 按「分享」→ 選「嵌入地圖」並按「複製 HTML」，把 iframe 程式碼貼到網站即可，不需要登入，也不需要 API 金鑰。要標多個地點、畫路線或匯入地址清單，改用「我的地圖」（My Maps）建立自訂地圖，設為公開後用「嵌入我的網站」取得程式碼。WordPress 貼在「自訂 HTML」區塊，把 width 改成 100% 就能適應手機版。
聯絡我們頁放一張 Google 地圖，訪客點一下就能導航，是商家網站最實用的小功能之一。但很多人卡在幾個地方：iframe 程式碼在哪裡拿？貼進 WordPress 之後手機版超出畫面怎麼辦？想標好幾間門市，或把 Excel 的地址清單變成地圖，又該用什麼工具？這篇用 2026 年的 Google 地圖實際操作，一步一步說明兩種做法：單一地點的嵌入地圖，以及用「我的地圖」做多點自訂地圖。
兩種做法怎麼選？
| Google 地圖「嵌入地圖」 | 我的地圖（My Maps） | |
|---|---|---|
| 適合 | 公司、店面只有一個地點 | 多間門市、經銷據點、活動路線 |
| 需要登入 | 不需要 | 需要 Google 帳戶 |
| 可以自訂 | 地點與縮放大小 | 圖釘圖示與顏色、圖層、線條、路線、匯入地址清單 |
| 費用 | 免費 | 免費 |
如果只是要顯示公司位置，用第一種就夠了；要在一張地圖上放很多點，再用我的地圖。
步驟一：在 Google 地圖找到你的地點
打開 Google 地圖，在左上角搜尋公司名稱或地址。用名稱搜尋得到的前提是商家已經建立「Google 商家檔案」；還沒有的話，直接輸入地址也可以。
地址建議輸入到門牌號碼就好，不要加樓層。左側資訊面板會出現地點名稱、地址與一排按鈕，最右邊就是「分享」。
步驟二：按「分享」→「嵌入地圖」
按下「分享」後會跳出分享視窗，上方是地點卡片與短網址，下方一排是分享方式。2026 年的介面中，「嵌入地圖」是最右邊的 <> 圖示，而不是舊版的分頁標籤。
步驟三：選大小，按「複製 HTML」
進入「嵌入地圖」畫面後，上方是 iframe 程式碼，右邊的「複製 HTML」按一下就會複製到剪貼簿；下方可以預覽嵌入後的樣子。
程式碼左邊的「中」是尺寸選單，可以選小、中、大或自訂大小。不過固定尺寸在手機上容易超出版面，比較好的做法是先複製預設的程式碼，貼到網站後再把寬度改成 100%（下一段說明）。
預覽下方寫著「嵌入這張地圖，即表示同意服務條款」，嵌入前可以點進去看一下 Google 地圖的使用條款。這種分享產生的 iframe 不需要申請 API 金鑰，也不會產生費用。
步驟四：貼到 WordPress，並改成 RWD 寬度
區塊編輯器：用「自訂 HTML」區塊
- 編輯要放地圖的頁面，按左上角「+」新增區塊，搜尋「自訂 HTML」。
- 把剛剛複製的 iframe 程式碼貼進去。
- 把
width="600"改成width="100%"，高度可以依版面改成 350 到 450 之間。 - 按區塊上方的「預覽」確認地圖有出現，再更新頁面。
注意不要把地圖網址直接貼在段落裡。Google 地圖不在 WordPress 的自動嵌入清單中，直接貼網址只會變成一條連結，一定要貼 iframe 程式碼。
想讓高度也跟著縮放
width 改 100% 之後，寬度會跟著螢幕縮，但高度還是固定的。如果希望地圖在手機上維持同樣比例，可以在「自訂 HTML」裡用一層 <div class="map-embed"> 包住 iframe，再到「外觀 → 自訂 → 附加的 CSS」加上下面這段（區塊佈景主題則在網站編輯器的樣式設定裡新增 CSS）：
.map-embed iframe {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}程式碼裡的 loading="lazy" 建議保留：地圖會等訪客捲到附近才載入，不會拖慢頁面一打開的速度。
Elementor 或其他頁面編輯器
原則都一樣：找到能插入 HTML 的元件，把程式碼貼進去。Elementor 也有內建的 Google 地圖小工具，輸入地址就能顯示，做法可以參考Elementor Google Map 教學。
我的地圖（My Maps）是什麼？
「我的地圖」是 Google 免費的自訂地圖工具，網址是 google.com/maps/d，需要用 Google 帳戶登入。它可以在一張地圖上放多個地點、用不同顏色與圖示分類、畫線或規劃路線，還能從 Excel 或 Google 試算表匯入整份地址清單，很適合做門市據點、經銷商地圖或活動動線。
依官方說明，每張地圖最多 10 個圖層、10,000 個地點或線條，每個圖層最多 2,000 個項目。
我的地圖教學：建立、匯入到嵌入網站
1. 建立新地圖
登入我的地圖，按「建立新地圖」，再點左上角「無標題的地圖」輸入地圖名稱與說明。這個名稱會顯示在嵌入地圖的標題列，建議寫清楚，例如「全台門市據點」。
2. 新增地點，或匯入地址清單
地點不多時，在上方搜尋列輸入名稱或地址，點選結果後按「新增至地圖」。地點很多時，用匯入比較快：
- 準備一份試算表，第一列是標題，至少要有「地址」「地名」或「經緯度」其中一欄，例如：門市名稱、地址、電話。
- 在左側圖層下方按「匯入」，上傳檔案。支援 CSV、TSV、KML、KMZ、GPX、XLSX 與 Google 試算表。
- 依畫面選擇哪一欄用來定位、哪一欄當作標記名稱。
匯入限制：單一檔案不要超過 2,000 列；未壓縮的 KML、KMZ 上限 5 MB，其他檔案上限 40 MB。之後地址清單有變動，可以在圖層選單用「重新匯入並合併」更新，不必整張地圖重做。
3. 設定圖示、顏色與預設畫面
在圖層的「樣式」可以統一更換圖示與顏色，或依某一欄（例如縣市、門市類型）自動分色。下圖是鵠學苑早期製作的示範地圖，用兩個圖層分別標出地點與行車路線；左上角的「分享」按鈕就是下一步要用的地方。
地圖調整到適合的範圍與縮放後，在左側面板地圖名稱旁的選單（三個點）選「設為預設檢視畫面」，嵌入網站時就會以這個畫面開啟。
4. 把地圖改成公開
新建立的地圖預設不公開，網站訪客會看不到內容。在左側面板按「分享」，開啟「公開你的地圖」（任何人都能找到並查看），再按「儲存變更」或「完成」。
5. 選「嵌入我的網站」，複製程式碼
在左側面板地圖名稱旁的選單選「嵌入我的網站」，就會出現 iframe 程式碼。選單裡還有「匯出成 KML/KMZ」「列印地圖」等功能。
複製後的貼法與前面相同：貼到 WordPress 的「自訂 HTML」區塊，width 改成 100%。我的地圖的嵌入網址格式是 google.com/maps/d/embed?mid=…，嵌入後上方會顯示地圖名稱，點左上角圖示可以展開圖層與地點清單。
我的地圖可以匯入 Google 地圖嗎？
不用匯入，登入同一個 Google 帳戶就能直接看到。依 Google 地圖說明：
- 電腦版：打開 Google 地圖，點左側「已儲存」→「地圖」，可以看到最近建立的 5 張我的地圖。
- 手機 Google 地圖 App：點「個人中心」→「地圖」，就能開啟自訂地圖，並對上面的地點導航。
要修改地圖內容，還是要回到瀏覽器的我的地圖編輯；手機 App 只能查看與導航。
常見問題
嵌入 Google 地圖要付費或申請 API 金鑰嗎？
用「分享 → 嵌入地圖」或我的地圖「嵌入我的網站」產生的 iframe 都不需要 API 金鑰，也不收費。需要申請金鑰與設定帳單的是 Google Maps JavaScript API，通常是佈景主題或外掛的地圖功能才會用到。
嵌入的地圖在手機上超出畫面怎麼辦？
把 iframe 的 width="600" 改成 width="100%"，地圖寬度就會跟著版面縮放。想連高度一起等比例縮放，可以用 div 包住 iframe，再用 CSS 設定 height:auto 與 aspect-ratio。
我的地圖嵌入後顯示空白或要求登入？
通常是地圖沒有設成公開。到我的地圖按「分享」，開啟「公開你的地圖」並儲存，再重新整理網頁確認。另外要複製的是「嵌入我的網站」的程式碼，不是編輯網址。
結語
只顯示一個地點，用 Google 地圖的「分享 → 嵌入地圖 → 複製 HTML」最快；要標多個據點、畫路線或匯入地址清單，就用我的地圖建立自訂地圖，記得先設為公開再「嵌入我的網站」。兩種程式碼貼進 WordPress 的「自訂 HTML」區塊後，都把寬度改成 100%，手機版就不會跑版。想讓地圖顏色更貼近品牌，可以再參考Google 地圖自訂外觀教學。