Google Maps API - 自訂地圖樣式風格
你是否已經看膩了千篇一律的 Google 地圖風格呢？現在只要透過 Google Maps API，就可以按照我們自己喜歡的風格，將地圖修改為我們自訂的樣式，甚至顯示或隱藏地圖上特徵的視覺顯示 ( 例如道路、公園、商家與其他搜尋點 )。
如何修改地圖樣式風格
回顧一下 Google Maps (2) - 使用地圖與基本設定 這篇文章的內容，後半段有提及 MapOptions 的「其他屬性」，當中有個屬性叫做「styles」，要改變地圖的樣式風格，就需要使用這個 styles，寫法大概會向下方的程式碼這樣，除了宣告 zoom 和 center，可以看到多了一個 styles 的屬性，它的內容是一個 json 物件的樣式宣告。
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: 25.0336962,
lng: 121.5643673
},
styles: [{
featureType: '',
elementType: '',
stylers: [
{color: ''},
{visibility: ''}
]
}]
});
}
JSON 樣式參考資料
物件樣式主要包含三個元素，要指定樣式，必須三個元素為一組，結合成一個樣式陣列，不過根據 Google 的說法，一次可套用的樣式數量是有限的，如果樣式陣列超過字元數目上限，就不會套用任何樣式。
- featureType：可不填，這個元素主要是地圖的地理特性，包括道路、公園、水域等等。如果您未指定特徵，則會選取全部特徵。
- elementType：可不填，這個元素主要是特徵的子部分，包括標籤和幾何形狀。如果不指定元素，則會選取該特徵的全部元素。
- stylers：必填，要套用到所選特徵與元素的規則。樣式工具指的是特徵的色彩、能見度和粗細。
由於 Google 官方的資料：樣式參考資料 已經很詳細，在這裡就不列出內容的特徵，直接寫個範例來試試看，下方的程式碼，會把地圖裡所有的道路 road 變成紅色的。
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: 25.0336962,
lng: 121.5643673
},
styles: [{
featureType:'road',
elementType:'',
stylers: [{
color: '#ff0000'
}]
}]
});
}
如果上面的例子，多添加一組 transit.station 的 style，就可以把所有大眾運輸車站 ( 機場、火車站、捷運站...等 ) 全部變成黑色。( 不過要注意的是，color 一定要填入六碼的色碼，例如紅色要填 #ff0000 不能只填 #f00。 )
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {
lat: 25.0336962,
lng: 121.5643673
},
styles: [{
featureType:'road.local',
elementType:'geometry.fill',
stylers: [{
color: '#ff0000'
}]
},{
featureType:'transit.station',
elementType:'',
stylers: [{
color: '#000000'
}]
}]
});
}
線上建立 Google Maps API 的自訂樣式
雖然我們透過 Google Maps API 已經可以修改地圖樣式風格，但每次都要手動改程式碼，甚至要明白地圖上每個元件的配色實在很不容易，所以這時就得透過 Google 官方推薦的「Google 線上地圖樣式編輯器」，直接在線上建立樣式風格。
線上地圖樣式編輯器：Google Maps APIs Styling Wizard
打開編輯器後，可以先點選左側預設的樣式，就可以馬上看到右側的地圖變成不同的風格，舉例來說這是夜晚 Night 的風格，也比剛剛自己手動畫的漂亮多了。
如果想要手動修改，也可以點選下方的 MORE OPTIONS，就會把打開完整的設定內容，並且可以用視覺化的方式進行設定。
設定完成後，按下左側選單最下方的 FINISH，就可以把對應的 JSON 樣式參考資料匯出。
複製 json，貼到剛剛的 Styles 裏頭，執行後就會看到我們自己的地圖，已經變成了漂亮的樣式。
Snazzy Maps
如果覺得預設的地圖樣式不夠，也可以 Google 搜尋地圖樣式，這時候通常出現在第一筆的，會是一個叫做「Snazzy Maps」的網站。( https://snazzymaps.com )
點選上方的 Explore styles，就可以看到全世界上神人們所設計的地圖樣式，上頭除了有瀏覽數量，也有評價的星星數，可以盡情挑選自己中意的樣式，如果想要挑選最多人使用的。
挑選完成後，同樣會產生 JSON 樣式參考資料，複製並貼到自己的地圖程式碼，就會看到自己的地圖變成特別的樣式囉！下面的例子我是挑選最多人喜歡的樣式，感覺還真是挺特別的...一片慘白 XD
小結
以上大概就是修改地圖樣式風格的方法，感覺程式不難，難在如何設計風格與配色，相信透過線上工具的輔助，大家都能做出漂漂亮亮的地圖囉！