WordPress 嵌入 Google 地圖：三種方法教學

在聯絡頁放一張 Google 地圖看似簡單，實作時卻常碰到尺寸不對、手機畫面擁擠或載入變慢。這篇要解的就是這件事，但這裡把順序倒過來講。

先講結論：在 WordPress 嵌入 Google 地圖，本質上只有兩種主流做法，一是用 Google 地圖內建的嵌入碼貼進編輯器，二是用 Elementor 的 Google Maps 小工具做視覺化控制。兩種都不難，十分鐘內可以上線（基礎後台操作見 WordPress 架站全攻略）。但真正決定這張地圖有沒有價值的，其實不是嵌入這個動作，而是你在嵌入之前有沒有把 Google 商家檔案補齊、嵌入之後有沒有顧到行動裝置的閱讀體驗和頁面載入速度。下面會一步一步帶你把這幾件事一次做對。

先講結論：嵌入地圖不難，但操作順序很重要

絕大多數教學文章會直接跳到「複製嵌入碼、貼進 WordPress」，看起來很有效率，卻漏掉了一個關鍵前提：你嵌進去的那張地圖，資料到底對不對。地址有沒有填到完整門牌、店名是不是跟招牌一致、營業時間是不是最新的，這些一旦在 Google 商家檔案裡設錯，地圖上就會跟著錯，再漂亮的嵌入都是把錯誤放大給訪客看。

動手嵌地圖前，第一件事應是回頭核對 Google 商家檔案：店名、地址、營業時間與商家類別逐項確認，必要時補上能代表現況的照片。地圖只是把位置資訊視覺化呈現出來，源頭錯了，下游怎麼嵌都救不回來。

所以這篇的順序是：商家檔案先弄對，再來選嵌入方法，接著顧行動裝置和速度。順序顛倒時，常會因地址或版面問題返工。如果你時間有限、只想看方法，可以直接跳到後面的兩種方法段落；但如果你希望這張地圖真的幫網站帶來價值，建議照順序讀完。

嵌入之前，先把 Google 商家檔案補齊（這才是會被搜尋到的部分）

這裡要先破除一個常見誤解：在網站聯絡頁嵌一張 Google 地圖，不會因此保證商家排到在地搜尋前面。在地結果主要取決於 Google 所說的相關性、距離與知名度；商家檔案完整度與評論等資訊，也能協助 Google 與使用者理解商家（見 Google 商家檔案說明的本地排名提示）。結構化資料可補充機器可讀資訊，但不是排名保證。互動地圖的主要價值，是幫已到站的訪客快速找到位置、降低問路摩擦。

動手嵌入之前，至少把商家檔案裡這幾個欄位核對一次：

• 商家名稱：要跟招牌、官網 footer、社群帳號完全一致，不要為了塞關鍵字而改成「台北最好喝的手沖咖啡‧咖啡館」這種過度優化的寫法，Google 對這類名稱作弊有明確規範。
• 地址：填到完整門牌，不是只到路段。這會直接影響導航跟在地搜尋的距離計算。
• 營業時間：節假日、臨時公休都要更新。地圖上顯示「營業中」卻撲空的客人，比給一星評論還傷。
• 商家類別：主類別要選最精準的那一個（例如優先選「咖啡館」，勝過籠統的「餐廳」），次要類別再補充。
• 電話與網站：電話要能點擊直接撥（行動裝置上尤其重要），網站連結指向你的首頁或聯絡頁。

把這些補齊之後，嵌入到 WordPress 的那張地圖才會自動帶到正確的標記與資訊卡。如果你還沒有商家檔案，或想知道怎麼把它經營到能帶來詢問，可以先把這篇 Google 我的商家完整攻略讀完，再回來嵌地圖，效率會高很多。這就是把這段放在嵌入方法之前的原因。

兩種嵌入方法的本質差異：一張表先看清楚

進入實作之前，先用一張表把兩種方法的差異攤開。建議你先判斷自己的站屬於哪一種情境，再往下讀對應的方法，才不會兩種都試、兩種都半調子。

為什麼要把方法拆開講，是因為 WordPress 生態實在太分散了。WordPress 長年佔全球網站內容管理系統市場的過半比重（依 W3Techs 2026 年 6 月的統計），這意味著用 WordPress 的人橫跨各種技術程度：有人用官方區塊編輯器加一個免費主題就上線，有人整站交給 Elementor 之類的頁面編輯器全權視覺化打造，也有人是工程背景、習慣自己控網址參數和 API 金鑰。同一個「嵌地圖」需求，落在這三種人手上會對應到三種截然不同的最佳做法，硬要叫所有人都用同一招，只會讓簡單的事變複雜。

一個簡單的原則：如果你只是要在聯絡頁放一張能點導航的地圖，方法 A 就夠了；如果你的整個形象站是用 Elementor 拉出來的，聯絡頁的每個區塊都要對齊同一套設計語言，那方法 B 才不會看起來格格不入。下面分別示範。

方法 A：用 Google 地圖內建的嵌入碼，零外掛搞定

這個方法的好處是完全不需要裝任何外掛，不管你用的是 Gutenberg 區塊編輯器、傳統編輯器，還是某個不知名的佈景主題，都能用。原理是從 Google 地圖網站產生一段 iframe 嵌入碼，再把它貼進 WordPress。

實際步驟如下：

1. 打開 Google 地圖：在瀏覽器前往 Google 地圖，在搜尋框輸入你的店名或地址。建議直接搜尋已經建好的商家檔案名稱，這樣地圖會精準對到你的標記，比單純輸入一個地址點更可靠。
2. 點「分享」再切到「嵌入地圖」：在左側資訊面板找到「分享」按鈕，點開後切換到「嵌入地圖」分頁。這裡會出現一段以 <iframe> 開頭的程式碼。
3. 預覽並選擇大小：視窗裡會即時預覽地圖樣子，你可以從下拉選單挑一個預設尺寸（小、中、大、自訂）。大多數情況選「中」或「自訂」填入你的欄位寬度最保險。
4. 複製 HTML：點「複製 HTML」，把整段 iframe 帶走。這段程式碼就是你的嵌入碼，裡面已經包含座標、縮放層級和 Google 的金鑰。
5. 貼進 WordPress：進到你要嵌的頁面，如果你用的是 Gutenberg，加一個「自訂 HTML」區塊，把程式碼貼進去；如果是傳統編輯器，切到「文字」模式貼上即可。千萬不要貼在「預覽」模式，否則 iframe 會被當成純文字顯示出來。
6. 調整寬度到手機友善：把 iframe 裡的 width="600" 改成 width="100%"，這樣地圖會自動填滿容器寬度，在手機上不會超出螢幕。高度維持像素值即可。

做到這裡，桌機上預覽應該已經能看到一張可互動的地圖，能拖曳、能縮放、能點導航。方法 A 的最大優點就是它跟你的編輯器完全脫鉤，未來即使你把整站從 Gutenberg 換成別的編輯器，這段 iframe 依然有效。如果你對區塊編輯器的操作還不熟，可以先看這篇 WordPress 頁面編輯器把基本功打穩，嵌地圖這類操作會直覺很多。

一個小提醒：嵌入碼裡的網址會帶一組 pb 參數，那是 Google 用來還原地圖狀態的編碼，不要手動改它，也沒必要刪。把它整段原封不動貼進去就好。

方法 B：用 Elementor 的 Google Maps 小工具，視覺化掌控樣式

如果你的站是用 Elementor 蓋的，那麼用 Elementor 內建的 Google Maps 小工具會比貼 iframe 更順手。你不用碰任何程式碼，所有設定都在右側面板用拉的，地圖還會跟同一頁的其他區塊共用同一套間距、陰影和欄位寬度，視覺一致性比方法 A 好很多。

Elementor 是目前 WordPress 生態常見的頁面編輯器之一，在 WordPress 官方外掛目錄就能免費下載。如果你還沒裝過任何頁面編輯器，正在比較選哪一套，可以先看 主流頁面編輯器比較 再決定；已經確定要用 Elementor 的人，建議搭配這篇 Elementor 使用教學 一起看，會更清楚小工具在整個編輯流程裡的位置。

Elementor 的 Google Maps 小工具設定步驟：

1. 進入 Elementor 編輯模式：打開你要編輯的聯絡頁，按「使用 Elementor 編輯」。
2. 找到 Google Maps 小工具：左側小工具面板搜尋「Google Maps」，把它拖進你要的欄位。免費版就有這個小工具，不需要 Elementor Pro。
3. 輸入地址：在右側「內容」分頁的「地址」欄位輸入你的店名或完整地址。Elementor 會自動呼叫 Google 地圖定位。建議直接貼商家檔案登記的完整地址，定位最準。
4. 設定高度與縮放：在「地圖高度」填一個像素值（聯絡頁常見落在 350 到 450 之間），「縮放」值調整預設顯示範圍。街道等級大約落在 15 到 17，太小看不到路名，太大反而看不到周邊地標。
5. 選擇地圖類型：有「路線圖」和「衛星」可選，聯絡頁通常用路線圖，方便客人看怎麼走。
6. 控制選項：可以勾選要不要顯示縮放控制、街景小黃人、地圖類型切換。實務上習慣保留縮放控制和街景、關掉地圖類型切換，避免使用者不小心切到衛星圖反而找不到路。
7. 樣式微調：切到「樣式」分頁，可以調整地圖容器的圓角、陰影、邊界，讓它跟周圍的聯絡表單、地址文字區塊看起來像同一套設計。

方法 B 相對方法 A 多了一個明顯好處：所有設定都存在 Elementor 的版型資料庫裡，未來要改地址、改高度，回去拖一拖就好，不用重新去 Google 地圖複製嵌入碼。如果你之後要做多語系、或多個分店頁，也能把這個地圖區塊存成範本重複套用，這部分可以參考 Elementor Cloud Templates 跨網站設計庫 的做法。想要更豐富的標記動畫、多點地圖、自訂圖釘這類進階效果，則可以透過第三方擴充，相關選擇在這篇 Elementor 外掛推薦 裡有整理。

進階第三條路：Maps Embed API 加 API Key，用網址參數產生地圖

除了上面兩種圖形介面方法，還有一條開發者路線：用 Google 的 Maps Embed API，自己組一段帶 API Key 的網址，直接放進 iframe 的 src。這條路的好處是地圖完全由網址參數控制，可以寫進範本、可以批次產生、可以放進版本控制，對多分店或多語系站特別好用。

官方的快速上手文件在 Google Maps Platform 的 Get Started 頁。基本流程是：在 Google Cloud Console 建一個專案、啟用 Maps Embed API、產生一把 API Key、把這把金鑰設好 HTTP 來源限制（只允許你自己的網域呼叫），再用類似下面的網址組出嵌入碼：

https://www.google.com/maps/embed/v1/place?key=你的金鑰&q=店名或地址&zoom=16

這條路最關鍵的資安動作是一定要設 HTTP 來源限制。API Key 如果裸奔、沒設白名單，等於把配額開給全世界，被人盜用呼叫會讓你的 Google Cloud 帳單爆掉，這是新手最常踩的坑。設好限制之後，即使金鑰被看見，也只能從你指定的網域呼叫，風險就降到很低。

三種方法選哪一個，可以用這個原則：單一聯絡頁、不想碰程式，選 A；整站 Elementor、要視覺一致，選 B；多分店、有開發資源、要可重現可版本控制，選 C。對絕大多數中小企業站長來說，A 跟 B 已經綽綽有餘，C 是規模化之後才需要碰的工具。

Maps Embed API 常用的網址參數

選擇方法 C 的人，把幾個關鍵網址參數搞懂，就能不用開 Google 地圖介面、純靠文字產生各種地圖樣貌。下面是實務上最常用的四個：

• q：查詢字串，可以放地址、店名或「緯度，經度」。放商家檔案登記的店名定位最準，因為它會比對到你的標記而不是任意地址點。
• center：地圖中心點的座標，格式是「緯度，經度」。當你想要地圖框住某個範圍、但標記不在正中間時特別有用，例如把店標記稍微偏左，右邊留白放文字說明。
• zoom：縮放層級，數字越大越近。街道視角大約落在 15 到 17，整個城市等級落在 11 到 13。聯絡頁通常要讓人看得到周邊路名，所以抓 16 左右最實用。
• maptype：地圖類型，roadmap 是路線圖、satellite 是衛星圖。聯絡頁一律用 roadmap，衛星圖對找路沒有幫助，還會讓畫面變得雜亂。

把這些參數組合起來，你可以為每一個分店用同一支範本批次產生地圖網址，地址從後台或試算表讀進來就行，不必每一張都手動去 Google 地圖拉。這正是方法 C 真正的價值所在，也是它跟前兩種圖形介面方法最大的分野。

Maps Embed API 目前可免費使用，官方文件標示沒有每日請求上限，但仍需要 API Key，且必須遵守 Google Maps Platform 服務條款（見 官方的用量與計費說明）。金鑰仍應設定網站來源與 API 限制，並定期查看用量，及早發現未授權呼叫。

地圖嵌入是隱形的效能殺手：先看數字再決定要不要嵌

講完怎麼嵌，接下來要談容易被忽略的載入成本。Google 地圖嵌入不管是 iframe 還是頁面編輯器小工具，本質上都會在頁面裡載入第三方地圖應用程式，包括 JavaScript 與地圖圖磚，實際傳輸量與主執行緒成本要用瀏覽器工具量測。

頁面載入慢、互動卡頓，可能反映在 Core Web Vitals 指標上。這些指標是眾多排名訊號中幅度較小的一項，更直接的用途是幫你找出真人使用時的等待與卡頓（可對照 Google 於 2020 年 11 月的 頁面體驗時程說明）。Google 的 web.dev 也整理了速度與使用者體驗、轉換之間的研究。

換個方式想：地圖嵌入就像在網頁裡開了一扇通往另一個複雜應用程式的窗，那扇窗一打開，瀏覽器就要同時跑你的網站和地圖程式兩邊的工作。在桌機寬頻下你感覺不明顯，但在手機的 4G、5G 環境下，或訪客訊號不穩時，這個負擔就會變成實實在在的等待時間。如果你的聯絡頁除了地圖還嵌了聯絡表單、圖片輪播、社群動態，整頁加起來的載入壓力會更快被感受到，行動裝置的使用者會最先察覺。

所以建議：嵌之前先量一次頁面速度當作基準，嵌進去之後再量一次，看看分數掉了多少。量測工具和讀數判讀可以參考這篇 載入速度優化全攻略。如果嵌入之後 Core Web Vitals 明顯下滑，那就該用接下來這幾個方法補救，放著不管只會讓問題慢慢累積。Core Web Vitals 跟排名的關聯，可以進一步對照這篇 Core Web Vitals 與 SEO 的解析。

讓嵌入地圖變輕的三個做法（延遲載入、靜態圖替代、精簡載入）

如果你發現地圖嵌入確實拖慢了頁面，有幾個從輕到重的做法可以選。這裡把它們列成三個層次，你按自己能接受的複雜度挑一個來做就好。

第一個做法：延遲載入（lazy load）。原理是讓地圖一開始不要載入，等到使用者滾動到附近或主動點擊後才拉取。實作上可在 iframe 使用 loading="lazy"，或採 facade 模式，先放一張經授權的靜態地圖或簡化位置卡片，點下去才載入互動地圖。延遲載入的通用觀念可延伸閱讀 延遲載入與網站效能。

第二個做法：用靜態位置卡片取代互動地圖。如果聯絡頁不需要拖曳、縮放，可以直接顯示地址、地標提示與「打開 Google 地圖導航」按鈕。若要顯示 Google 地圖圖片，應使用 Google Maps Static API 或其他授權允許的輸出，不要自行截圖後當成可任意重製的素材。圖片本身的優化觀念可以對照 WordPress 圖片優化指南。

第三個做法：避免同區堆疊重型第三方元件。關閉控制項不一定會明顯減少地圖下載量，快取外掛也無法完整控制第三方 iframe 裡的資源。較可靠的策略是讓地圖延遲載入，並避免在附近同時放入影片、社群牆或大型輪播，再以 Network 與 Performance 面板驗證結果。

這三個做法不互斥，可以疊加使用。最推薦的組合是：桌機用延遲載入的互動地圖，行動裝置上換成靜態圖加導航按鈕。這樣兼顧了桌機使用者的互動需求和手機上的速度需求，是實際專案裡最務實的平衡點。

嵌入地圖能不能幫你排名？把話說清楚

這一段要很誠實地回答一個很多老闆會問的問題：「在網站放一張 Google 地圖，SEO 分數會不會加分？」答案是：直接幫助很小，間接幫助看你怎麼用。

Google 公開的在地排名說明並未把「網頁有沒有嵌地圖」列成一項保證加分。應優先維護正確完整的商家檔案、評論與網頁上可見且一致的商家資訊；LocalBusiness 等結構化資料用來協助機器理解內容，不應包裝成排名槓桿。若嵌地圖只是為了提升排名，這個期待沒有可靠依據。

地圖的間接價值在於降低訪客找路、致電或留下詢問的摩擦，這是轉換改善，不應包裝成停留時間、跳出率或評論會回頭推升排名。真正需要經營的是商家檔案、可見且一致的商家資訊，以及能回答在地需求的頁面內容。結構化資料可參考 結構化資料 SEO 指南；轉換流程則可對照 提升網站詢問量。

地圖之外，聯絡頁該補的 LocalBusiness 結構化資料

既然講到結構化資料，順手把聯絡頁最該補的欄位列出來。用 LocalBusiness 這個類型（餐飲業可以再用更精準的 FoodEstablishment 或 Restaurant，服務業有 ProfessionalService），把接下來這幾個欄位標記清楚，搜尋引擎才讀得懂你的在地資訊：

• name：商家名稱，跟商家檔案、網站 footer 完全一致。
• address：用 PostalAddress 結構拆成 streetAddress（門牌）、addressLocality（城市）、postalCode（郵遞區號），比一段純文字地址更容易被正確解析。
• telephone：電話號碼，建議帶國碼格式（+886...），方便搜尋引擎跨地理解。
• openingHoursSpecification：營業時間，用結構化的方式標出每天幾點開、幾點關。
• geo：經緯度座標，這一欄跟你的地圖標記互相呼應，讓搜尋引擎更有把握把你定位在對的位置。
• url：官方網站網址，指向首頁或聯絡頁皆可。

這份標記應和 Google 商家檔案、網頁上可見的 NAP 文字與地圖座標保持一致。結構化資料能讓機器更明確地理解商家資訊，但不保證特定搜尋版型或排名提升。

反過來說，如果嵌入的方式不當（地圖過大導致版面擠壓、載入過慢導致使用者跳出），它甚至可能透過拖累頁面體驗，對排名產生負向影響。這正是為什麼前面那段效能優化不能跳過的原因。把地圖嵌好、嵌輕、嵌對地方，它才會是助力，否則反而變成阻力。

手機上的地圖：別讓它在小螢幕上變成災難

全球行動裝置佔網頁流量的比例長期維持在高檔（依 Statista 的統計）。Google 也已完成行動優先索引，也就是主要使用行動版內容建立索引，不是替行動版加一個獨立排名分數（見 Google Search Central 於 2023 年 10 月的 Mobile-first indexing 公告）。使用者若多半用手機找路，實機測試就不能省略。

手機上的地圖嵌入最容易出現三個問題，下面各自給出解法：

問題一：地圖寬度超出螢幕。症狀是地圖右邊被切掉、頁面出現橫向捲軸。原因是 iframe 的 width 寫死成像素值。解法是把 width 改成 100%（方法 A），或在 Elementor 小工具把欄位寬度設成自動填滿（方法 B）。這是最基本也一定要修的。

問題二：地圖高度太高，擠掉其他資訊。症狀是手機上一打開聯絡頁，整個第一螢幕被地圖佔滿，地址和電話反而要往下捲才看得到。解法是在行動裝置把地圖高度設小一點（例如桌機 450、手機 280），Elementor 可以直接在響應式設定裡針對手機單獨設高度。手機使用者的優先順序是地址、電話、導航按鈕，地圖是輔助，不該搶第一視覺。

問題三：點了地圖沒辦法直接導航。症狀是使用者得自己在地圖裡找「路線」按鈕。更好的做法是在地圖正下方放一個明顯的「導航到這裡」按鈕，連結直接指向 Google 地圖的導航模式（商家檔案的導航連結即可）。多一次點擊就多一次流失，手機使用者尤其沒耐心。響應式設計的整體觀念，可以延伸看這篇 響應式網頁設計。

這三個問題其實都指向同一個設計原則：手機版的聯絡頁要以「最快讓客人找到你、聯絡你、導航到你」為目標，單純把桌機的排版等比例縮小塞進小螢幕是行不通的。每多一個阻礙，就會少掉一批本來會上門的客人。

實際專案裡的選擇清單：什麼情境用哪一種

到底該選哪一種？接下來這張決策表不是標準答案，而是依需求、維護能力與效能成本整理的起點，你可以直接對照自己的狀況。

會需要做這種分類，是因為嵌入式地圖沒有「一種打法走天下」這回事。一個賣手沖咖啡的單店小店，跟一個有十個分站的連鎖餐飲品牌，需要的解法完全不同。搞清楚自己的規模和需求再選，才不會陷入「別人用 Elementor 所以我也用」這種複製貼上思維。如果你想從更上層的角度理解為什麼在地店家的網站要這樣配置，這篇 形象網站對企業的價值 有完整的討論；正在規劃整站架構的人，則可以對照這篇 用三個層次把 WordPress 形象網站搭起來 的流程，把聯絡頁這個環節放進整體藍圖裡看。實際上，類似的「在哪個頁面嵌哪種外部內容」的判斷，也適用於嵌入 Facebook 粉專或 Google 表單這類需求，做法可以互相參考 WordPress 嵌入 Facebook 跟 WordPress 嵌入 Google 表單。

嵌完之後的五分鐘檢查清單

收在這裡的，是一份嵌完地圖之後一定要跑一次的檢查清單。清單不長，但每一項都是實務上常見、出問題會讓客戶立刻發現的項目。花五分鐘照著走一遍，能幫你擋掉絕大多數的低級錯誤。

1. 換手機實際打開聯絡頁：不要只看桌機預覽。用自己手機開一次，確認地圖寬度不超出螢幕、高度合理、沒有橫向捲軸。
2. 確認地圖標記位置正確：對照你的實際門牌，標記有沒有偏到隔壁巷子。錯了的話，回商家檔案改地址，嵌入會自動更新。
3. 點一次導航：從地圖或導航按鈕點進 Google 地圖導航模式，確認規劃的路線確實能到你的店。
4. 量一次頁面速度：嵌入前後各量一次，分行動版跟桌機版。如果行動版明顯變慢，回頭套用延遲載入或改靜態圖。
5. 檢查 NAP 一致性：地圖上的店名、地址、電話，要跟頁面上的文字、footer、商家檔案完全一致。四邊對不起來是在地 SEO 的大忌。
6. 檢查結構化資料：若頁面使用 LocalBusiness 結構化資料，讓店名、地址、電話、營業時間與 geo 座標和可見內容一致。它能協助搜尋引擎理解商家資訊，但不保證排名提升。
7. 放一個明顯的導航與致電按鈕：手機上「點擊撥號」跟「一鍵導航」要在第一螢幕就看得到，別讓使用者還要在地圖裡翻找。

照著這份清單收尾，你的聯絡頁就不會只是「有放一張地圖」，而是「放了一張能真的把網路流量帶進店裡的地圖」。這兩者之間的差距，往往就是有沒有把那五分鐘檢查走完的差別。

把地圖嵌入做好，背後其實是一套完整的在地數位經營思維：商家檔案是源頭，網站嵌入是出口，結構化資料和行動體驗是中間的橋樑。任何一環漏了，整個鏈條就鬆了。下次需要為聯絡頁加地圖時，就能依這四個環節逐項完成，不必只在 iframe 寬度上反覆試錯。

本質上來說地圖嵌入這件事的難度從來不在技術本身。複製一段嵌入碼、或拖一個 Elementor 小工具進欄位，都是十分鐘內能學會的動作。真正拉開差距的，是你有沒有把商家檔案補齊、有沒有在意手機上的閱讀體驗、有沒有在嵌入之後回頭量一次速度、有沒有把結構化資料補上。這些細節加起來，才是「會把在地流量帶進店裡的聯絡頁」跟「只是有放一張地圖的聯絡頁」之間的距離。現在就挑出你網站上的聯絡頁，照上面的清單走一遍，看看哪一環最該先補強吧。