客製化 Google Map 樣式完整教學

發表於 2026-04-29 分類於 gamelife

客製化 Google Map 樣式完整教學

Google Maps 是目前最廣泛使用的地圖服務之一,但預設樣式對於追求設計感或特殊主題的網站(例如遊戲、品牌官網、資料視覺化儀表板)來說,往往略顯單調。所幸 Google 提供了完整的樣式自訂機制,讓開發者可以透過 JSON 設定檔調整地圖上每一項元素的色彩、可見度與標籤呈現方式。

本文將介紹兩個最常被使用的工具:官方推出的 Google Maps Styling Wizard,以及社群維護的 Snazzy Maps,並說明如何將樣式套用到實際的網頁中。

為什麼要客製化地圖樣式

預設的 Google Maps 配色雖然中性,但在某些情境下會帶來干擾:

遊戲或互動體驗:需要突出地圖上的角色、任務點或路線,過多的 POI(興趣點)反而會分散注意力
品牌一致性:希望地圖配色與網站主視覺(Logo、主色調)融合
深色模式:夜間瀏覽情境下,亮色地圖會造成眩光
資料視覺化:在地圖上疊加大量標記或熱力圖時,需要降低底圖的視覺權重

透過樣式設定,你可以隱藏不需要的元素、調整配色,甚至打造復古、科幻、極簡等各種風格主題。

工具一:Google Maps Styling Wizard

Google Maps Styling Wizard 是 Google 官方提供的線上樣式編輯器,完全免費,且不需要登入即可使用。

介面操作流程

進入網站後,點選 Create a Style 開始建立新的樣式。整個編輯介面分為三個主要區塊:

左側樣板區:提供 Standard、Silver、Retro、Dark、Night、Aubergine 等內建主題,可作為起始樣板
中央預覽區:即時顯示樣式套用後的效果,可以縮放與拖曳
右側細節調整區(進入 More Options 後):可針對個別元素進行精細控制

進階自訂(More Options)

點選 More Options 後,可以對地圖元素進行細項調整。Google 將地圖元素分為以下幾大類:

元素類別	說明
`all`	所有元素的全域設定
`administrative`	行政區界線(國家、縣市)
`landscape`	地形(自然景觀、人造建物)
`poi`	興趣點(學校、醫院、公園、商家)
`road`	道路(高速公路、主幹道、巷弄)
`transit`	大眾運輸(公車、捷運、火車)
`water`	水域(海洋、河流、湖泊)

每個類別還可以再細分為 geometry(幾何形狀)、labels(標籤)、labels.icon(標籤圖示)、labels.text(標籤文字)等子層級。針對每個層級,你可以調整:

Visibility:on、off、simplified 控制顯示與否
Color:幾何形狀的填色
Stroke:邊框顏色
Saturation / Lightness / Gamma:整體飽和度與亮度

舉例來說,若要打造一張「只保留道路與水域」的極簡地圖,可以將 poi、transit、administrative.labels 全部設為 visibility: off。

匯出 JSON 樣式

完成編輯後,點選右上角的 Finish,Wizard 會產生一段 JSON 陣列。這就是 Google Maps API 所使用的樣式格式,範例如下:

[
  {
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      { "color": "#193341" }
    ]
  }
]

複製這段 JSON,稍後將會使用它套用到實際的地圖實例中。

工具二:Snazzy Maps 樣板網站

雖然 Wizard 提供了完整的編輯能力,但從零開始設計一份美觀的地圖樣式仍然需要不少美感與時間。Snazzy Maps 則是一個由社群驅動的樣式分享平台,上面有超過 40,000 種免費樣式可以直接套用。

瀏覽與篩選

Snazzy Maps 的首頁提供多種瀏覽方式:

Explore:依熱門程度、最新上架、編輯精選排序
Tags:依標籤篩選,例如 dark、monochrome、retro、subtle、gaming
Colors:依主色調篩選,適合需要配合品牌色的場景

點選任一樣式進入詳細頁面後,左側為大圖預覽,右側則直接提供 JavaScript 程式碼與 JSON 樣式陣列。

取得樣式程式碼

在樣式詳細頁面中,你可以選擇兩種使用方式:

JavaScript Style Array:直接複製 JSON 陣列,適合自行整合到既有專案
JavaScript Code:完整可執行的 HTML + JS 範例,適合快速驗證效果

對於大部分整合情境,建議直接取用 JSON 陣列,後續再透過 Maps API 注入。

註冊帳號的好處

雖然不註冊也能使用大部分功能,但註冊後可以:

建立個人收藏夾(Favorites),方便管理常用樣式
上傳自己設計的樣式並分享給社群
留言與評論其他使用者的作品

將樣式套用到網頁

取得 JSON 樣式後,接著就是將它套用到實際的 Google Maps 實例。以下是最常見的 JavaScript Maps API 整合方式:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Custom Styled Map</title>
  <style>
    #map { height: 100vh; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    function initMap() {
      const customStyle = [
        {
          "featureType": "poi",
          "elementType": "labels",
          "stylers": [{ "visibility": "off" }]
        },
        {
          "featureType": "water",
          "elementType": "geometry",
          "stylers": [{ "color": "#193341" }]
        }
      ];

      const map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 25.0330, lng: 121.5654 },
        zoom: 13,
        styles: customStyle
      });
    }
  </script>
  <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
  </script>
</body>
</html>

關鍵在於 Map 建構子的 styles 屬性,將從 Wizard 或 Snazzy Maps 取得的 JSON 陣列直接傳入即可。

Cloud-based Map Styling 的注意事項

需要特別留意的是,Google 自 2023 年起推出了 Cloud-based Map Styling,在 Google Cloud Console 中以視覺化介面管理樣式,並透過 mapId 參數套用:

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 25.0330, lng: 121.5654 },
  zoom: 13,
  mapId: "YOUR_MAP_ID"
});

當 mapId 與 styles 同時存在時,styles 屬性會被忽略。若你計畫使用本文介紹的 JSON 樣式方式,請確保不要指定 mapId,否則自訂樣式將不會生效。

實務建議

最後分享幾個實務上常見的調整方向:

效能考量:大量隱藏標籤(設為 visibility: off)能略微減少地圖渲染負擔,適合行動裝置
可讀性平衡:即使追求極簡風,主要道路標籤仍建議保留,避免使用者迷失方向
樣式版本控管:將 JSON 樣式獨立存成 mapStyle.json 檔案,方便日後維護與多專案共用

結語

客製化 Google Map 樣式並不困難,關鍵在於善用工具:Google Maps Styling Wizard 適合需要從零打造、追求精細控制的場景;Snazzy Maps 則是快速取得高品質樣板的最佳途徑。兩者搭配使用,能讓你在最短時間內為網頁打造出獨特且符合品牌調性的地圖體驗。

下次當你需要在網站中嵌入地圖時,不妨花十分鐘挑選或設計一份專屬樣式,讓使用者體驗從「能用」升級為「印象深刻」。