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 的說法,一次可套用的樣式數量是有限的,如果樣式陣列超過字元數目上限,就不會套用任何樣式。

由於 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 裏頭,執行後就會看到我們自己的地圖,已經變成了漂亮的樣式。

範例:線上建立 Google Maps API 的自訂樣式

Snazzy Maps

如果覺得預設的地圖樣式不夠,也可以 Google 搜尋地圖樣式,這時候通常出現在第一筆的,會是一個叫做「Snazzy Maps」的網站。( https://snazzymaps.com )

點選上方的 Explore styles,就可以看到全世界上神人們所設計的地圖樣式,上頭除了有瀏覽數量,也有評價的星星數,可以盡情挑選自己中意的樣式,如果想要挑選最多人使用的。

挑選完成後,同樣會產生 JSON 樣式參考資料,複製並貼到自己的地圖程式碼,就會看到自己的地圖變成特別的樣式囉!下面的例子我是挑選最多人喜歡的樣式,感覺還真是挺特別的...一片慘白 XD

範例:線上建立 Google Maps API 的自訂樣式

小結

以上大概就是修改地圖樣式風格的方法,感覺程式不難,難在如何設計風格與配色,相信透過線上工具的輔助,大家都能做出漂漂亮亮的地圖囉!

有興趣瞧瞧其他新文章嗎?