google maps api 更改地圖樣式

google maps api 可以輕鬆自定自己想要的地圖樣式，覺得地標太多太雜，或想要自定一個喜歡的色系，用這個就可以了。

參考官網範例:

view plaincopy to clipboardprint

1. var map;   
2. var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);   
3.   
4. var MY_MAPTYPE_ID = 'custom_style';   
5.   
6. function initialize() {   
7.   
8.   var featureOpts = [   
9.     {   
10.       stylers: [   
11.         { hue: '#890000' },   
12.         { visibility: 'simplified' },   
13.         { gamma: 0.5 },   
14.         { weight: 0.5 }   
15.       ]   
16.     },   
17.     {   
18.       elementType: 'labels',   
19.       stylers: [   
20.         { visibility: 'off' }   
21.       ]   
22.     },   
23.     {   
24.       featureType: 'water',   
25.       stylers: [   
26.         { color: '#890000' }   
27.       ]   
28.     }   
29.   ];   
30.   
31.   var mapOptions = {   
32.     zoom: 12,   
33.     center: brooklyn,   
34.     mapTypeControlOptions: {   
35.       mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]   
36.     },   
37.     mapTypeId: MY_MAPTYPE_ID   
38.   };   
39.   
40.   map = new google.maps.Map(document.getElementById('map-canvas'),   
41.       mapOptions);   
42.   
43.   var styledMapOptions = {   
44.     name: 'Custom Style'  
45.   };   
46.   
47.   var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);   
48.   
49.   map.mapTypes.set(MY_MAPTYPE_ID, customMapType);   
50. }   
51.   
52. google.maps.event.addDomListener(window, 'load', initialize);  

要改樣式的話只要改 featureOpts 就可以了，設定的地方可以看這邊的 API 說明。

主要是指定 FeatureType 和 ElementType ，再設定 stylers 就可以了，說明不是很清楚的話，只要把要指定的部分丟上去，重整就可以看那個是不是你要的部分，稍微花一些時間調整就可以調整出想要的樣子了。

也可以透過這個工具調整完樣式後，複製 json 就可以了。

最近做的變革地圖就是這樣調出來的，有興趣的話就試試看吧。