重點整理
2026 年 Google 地圖自訂樣式有兩種做法：舊的 Styling Wizard（mapstyle.withgoogle.com）仍可免費使用，選好主題、調整顏色後按「COPY JSON」就能拿到樣式碼；Google 目前主推的則是在 Google Cloud 控制台設定的「雲端地圖樣式」，要搭配地圖 ID（Map ID）使用。兩種做法都要 Maps JavaScript API 金鑰與帳單設定，而且不能混用。不用金鑰的 iframe 嵌入地圖則無法改樣式。
網站的配色都設計好了，偏偏聯絡我們頁面的 Google 地圖還是預設的藍綠配色，看起來格格不入。很多人搜尋「google map style」「styling wizard」，就是想把地圖改成灰階、深色或品牌色。這篇會先說明 2026 年 Google 地圖樣式的現況，再一步一步示範 Styling Wizard 怎麼用、JSON 樣式怎麼放進網站，接著介紹 Google 主推的雲端地圖樣式流程，最後說明不用 API 金鑰的 iframe 嵌入能做到什麼程度。
先搞懂：2026 年 Google 地圖自訂樣式有哪些做法？
Google 地圖放到網站上有三種常見方式，能不能自訂樣式差很多：
- iframe 嵌入：在 Google 地圖按「分享 → 嵌入地圖」複製程式碼，不需要 API 金鑰，但地圖外觀完全不能改。
- JSON 樣式：用 Styling Wizard 產生一段 JSON，透過 Maps JavaScript API 的
styles設定套用。官方文件仍有完整說明，但它只適用於沒有使用地圖 ID 的點陣（raster）地圖。 - 雲端地圖樣式：在 Google Cloud 控制台建立「地圖樣式」並關聯到地圖 ID，網站程式碼只要帶入地圖 ID。之後要改顏色，在控制台改完發布即可，不用動網站。官方說明可自訂的地圖項目將近 100 種，比 JSON 樣式多。
官方文件特別提醒：雲端樣式和程式碼裡的 JSON 樣式不要在同一個網站混用。地圖只要設定了地圖 ID，styles 就不會生效。另外 Google 在 2024 年把舊的 google.maps.Marker 列為不建議使用，改推「進階標記」（Advanced Markers），而進階標記一定要有地圖 ID；所以新網站如果要用進階標記，就只能選雲端樣式。
費用：用 Google 地圖 API 要付錢嗎？
JSON 樣式和雲端樣式都是透過 Maps JavaScript API 顯示地圖，所以都要先申請 API 金鑰、在 Google Cloud 綁定帳單。依 Google Maps Platform 官方價目表（2026 年 10 月查閱），網頁上的動態地圖（Dynamic Maps）每月前 10,000 次載入免費，超過後每 1,000 次 7 美元起，用量越大單價越低。Styling Wizard 的對話框也註明，Maps JavaScript API 使用雲端樣式不會另外加價。
一般中小企業官網的聯絡頁面，每月地圖載入通常不會超過免費額度，但帳單還是一定要綁，否則地圖會出現「僅供開發使用」浮水印。申請金鑰與帳單的步驟可以參考Google Maps JavaScript API 申請教學和Google 地圖出現浮水印的帳單設定教學。
Styling Wizard 還能用嗎？實測操作步驟
可以。2026 年 10 月實際打開 mapstyle.withgoogle.com，網站仍正常運作，不用登入就能編輯和複製 JSON。不過介面只有英文，而且一打開就會先跳出雲端樣式的推廣視窗。
步驟一：關掉推廣視窗，進入舊版編輯器
進站後會看到「Cloud-based maps styling is here」的視窗，介紹雲端樣式的新功能。如果你要的是 JSON 樣式碼，點最下方的「Use the legacy JSON styling wizard」就能進入舊版編輯器。
步驟二：搜尋地址，選擇主題與顯示密度
右上角的「Search Address」可以輸入中文地址，例如「台北車站」，地圖會移到那裡，方便邊調邊看實際效果。左側分成兩區：
- Adjust density of features（調整顯示密度）：三條拉桿分別控制 Roads（道路）、Landmarks（地標）、Labels（文字標籤）。往左拉會隱藏越多細節，地圖看起來越乾淨。
- Select theme（選擇主題）：內建 Standard（標準）、Silver（銀灰）、Retro（復古）、Dark（深色）、Night（夜間）、Aubergine（茄紫）六種配色。
上圖選了 Retro 主題，並把地標和文字標籤調低一格，商家圖示和小路名少了很多，畫面清爽不少。如果只是要和網站配色搭一點，做到這一步就可以直接跳到步驟四。
步驟三：用 MORE OPTIONS 調整單一項目的顏色
按左下角的「MORE OPTIONS」會打開進階面板，分成三欄：
- Feature type（地圖項目）：例如 Road → Highway（高速公路、快速道路）、Water（水域）、Points of interest（興趣點）。
- Element type（元素）：Geometry（形狀，可再分 Fill 填色、Stroke 外框）或 Labels（文字與圖示）。
- Stylers（樣式）：Visibility 決定顯示或隱藏，勾選 Color 後可以點色塊改顏色，Weight 調整線條粗細。
上圖示範把 Road → Highway → Geometry → Fill 的顏色改成黃色，右邊地圖上的主要道路立刻跟著變色。已經修改過的項目，左邊會出現藍色小圓點，方便找回來。面板下方灰字也提醒，飽和度、亮度這類調整會受 Google 底圖更新影響，建議盡量用 Color 直接指定顏色。
步驟四：按 FINISH 複製 JSON
調整完按「FINISH」，視窗上半部「Use JSON styling」就是樣式碼，按「COPY JSON」複製；旁邊的「COPY STATIC MAP URL」則是靜態地圖圖片網址。下半部「Use Cloud-based Maps Styling」說明如果要改用雲端樣式，可以把這段 JSON 匯入 Google Cloud 控制台。
JSON 樣式怎麼放進網站？
自己寫程式：設定 styles
如果網站是自己用 Maps JavaScript API 寫的，建立地圖時把 JSON 貼進 styles 即可。注意這張地圖不能同時設定 mapId：
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 25.0478, lng: 121.5170 },
zoom: 15,
styles: [ /* 貼上 COPY JSON 複製的內容 */ ]
});WordPress：用 WP Go Maps 外掛
舊文介紹的「Elementor Google Maps Extended」外掛已經從 WordPress 外掛目錄下架，不建議再用。目前還在維護的替代選擇是 WP Go Maps（原名 WP Google Maps），2026 年 9 月仍有更新，啟用數 30 萬以上。它的說明寫明內建多種地圖主題、也能加入自己的主題（部分進階樣式功能列在付費的 Gold 擴充），而且只吃上面這種舊版 JSON，不是雲端樣式匯出的 JSON。使用 Google 地圖引擎一樣要先在外掛設定填入 API 金鑰。
Elementor 內建的 Google 地圖小工具可以改樣式嗎？
不行。Elementor 免費版的「Google 地圖」小工具其實是 iframe 嵌入，只能設定地址、縮放與高度，樣式頁籤裡的「CSS 濾鏡」只能整張調灰階、亮度或對比，效果和下一節的 iframe 做法一樣。Elementor 小工具的多點標註做法可以參考Elementor Google Map 教學。
Google 主推的雲端地圖樣式（Map ID）怎麼設定？
雲端樣式要在 Google Cloud 控制台操作，需要登入 Google 帳號、有專案並已啟用帳單。整體流程如下：
- 建立地圖樣式：在控制台的「地圖樣式」按「建立樣式」，可以從 Google 預設樣式開始，選淺色或深色模式；也可以切到「JSON」分頁，匯入剛剛用 Styling Wizard 做好的 JSON，舊樣式不用重做。
- 調整並發布：選取地圖項目逐一改顏色與顯示，按「儲存」後發布。
- 建立地圖 ID 並關聯樣式：在「地圖管理」建立地圖 ID，類型選 JavaScript，再把剛剛的樣式關聯上去。
- 網站程式碼帶入地圖 ID：
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 25.0478, lng: 121.5170 },
zoom: 15,
mapId: '你的地圖 ID'
});之後要換色，只要回控制台修改樣式再發布，網站上的地圖會自動更新。控制台的按鈕名稱可能隨介面改版調整，實際操作請以 Google Maps Platform 官方文件為準。
不想申請 API 金鑰？iframe 嵌入能做到什麼程度
如果只是要在聯絡頁面顯示公司位置，最簡單的是在 Google 地圖搜尋地點，按「分享 → 嵌入地圖」複製 iframe 程式碼貼到網站，完全不用金鑰也不用綁帳單。詳細步驟可以看網站嵌入 Google 地圖教學。
代價是外觀無法自訂。唯一能做的是用 CSS 濾鏡整張調色，例如加上 filter: grayscale(1) 變成灰階：
.map-wrap iframe {
filter: grayscale(1);
}濾鏡會把整張地圖連同店家圖示一起變色，沒辦法只改道路顏色或隱藏特定圖示。Google 另外提供的 Maps Embed API 雖然官方標示免費、不限次數，但需要 API 金鑰，而且同樣沒有樣式設定。需要細部調整，還是得回到 Maps JavaScript API 搭配 JSON 或雲端樣式。
常見問題
mapstyle.withgoogle.com 還能用嗎？
可以。2026 年 10 月實測仍能免費使用、不用登入，進站後點「Use the legacy JSON styling wizard」就能進入舊版編輯器，完成後按「COPY JSON」複製樣式碼。只是 Google 已主推雲端地圖樣式，新網站建議優先考慮。
JSON 樣式和雲端地圖樣式可以一起用嗎？
不行。官方文件說明地圖設定了地圖 ID 後，程式碼裡的 styles 就不會生效；要改用雲端樣式，可以把原本的 JSON 匯入 Google Cloud 控制台的地圖樣式，不用重做。
不申請 API 金鑰可以改 Google 地圖顏色嗎？
只能做到整張調色。用「分享 → 嵌入地圖」的 iframe 不需要金鑰，但只能靠 CSS 濾鏡把整張地圖變灰階或調亮度，無法單獨改道路、水域顏色或隱藏商家圖示。
結語
Google 地圖自訂樣式的工具和規則這幾年改了不少，但選擇其實很單純：只要標出公司位置，用 iframe 嵌入最省事；舊網站或外掛只吃 JSON，Styling Wizard 仍然可以用；新網站、需要進階標記，或希望之後改樣式不用動程式碼，就直接用雲端地圖樣式加地圖 ID。不論選哪一種，用到 Maps JavaScript API 就記得先把金鑰和帳單設定好，地圖才會正常顯示。