RailsでGoogle mapsを使いこなすためのメモ 2 / 地図デザインのカスタマイズ

Google mapsでフォルトの地図表示は見やすくていいんだけど、「自分のウェブサービスとデザインが合わない！合わせたい！」ということも多いはず。結構簡単にカスタマイズできた。

　　
RailsでGoogle mapsを使いこなすためのメモシリーズ

前回は地図を表示させるだけでしたが、今回はその地図の表示を少しカスタマイズする場合のメモ。ものすごく細かく設定できるので、高速道路だけ赤にしたい！なんていうのも可能。

前回のコードに下記を加えます。
google_maps.coffee.erb

coffee

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# スタイル定義
map_style_options = [
    {
        featureType: 'all',
        elementType: 'geometry',
        stylers: [{ hue: '#6d4d38' }, { saturation: '-70' }, { gamma: '2.0' }]
    },
    {
        featureType: 'water',
        elementType: 'geometry',
        stylers: [{ color: "#acdcfa" }]
    }
    {
        featureType: 'all',
        elementType: 'labels',
        stylers: [{ lightness: "10" }]
    }
]

# スタイル適用
my_style = new google.maps.StyledMapType(map_style_options)
map_canvas.mapTypes.set('MyStyle', my_style)
map_canvas.setMapTypeId('MyStyle')

map_style_optionsにあるallで、ざっくりとマップの雰囲気を変えています。
saturationを下げておけば、とりあえずは、なんとなく統一感のあるマップになるかと…。
waterでは海とか川とか、水を表現している色を変えました。
最後のallでは文字関係をすこしだけ目立たなくするために、明度を上げました。
　　
stylersにどんな値を入れられるかはこのページで確認しましょう。
waterとかallとか、指定できるオブジェクトのリストはこのページです。

こんな感じにグーグルマップが少しおしゃれになりました。

Screen Shot 2014-01-12 at 9.34.33 AM