GoogleMapのスタイルの指定方法が、ちょっとだけ分かりにくく感じたので、自分なりに解釈してみました。
そのときのメモ 
です◯
基本的なルール
GoogleMapのスタイルは、
- featureType (スタイルをあてる対象)
- elementType (その対象を構成するデザイン要素)
- stylers (スタイル)
という3つセットをJSON形式で指定します。↓のような感じです。
[
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ff0000"
}
]
}
]
featureType、elementType、stylersとは
3つセットのうち、stylersはなんとなく想像できますが、 featureType、elementTypeはいまいちピンと来ない方もいるかと思います。
GoogleMapAPIの Style Referenceを見た私なりの解釈は以下のような感じです。
-
featureType (スタイルをあてる対象)
- 地図上のどこを変えるのか指定するためのもの。
- 道路、公園、水域など、地図上の地理的特徴(feature)で指定できるのが特徴です◯
-
elementType (その対象を構成するデザイン要素)
- 上記で指定したfeatureTypeのどの部分を変えるのか指定するためのもの。
- 塗り、線、テキストカラーなどです。
-
stylers (スタイル)
- 上記で指定した、どこのどの部分をどうするかを指定するためのもの。
- 色は赤、色相はこれくらい、彩度は80・・・などです。
具体的にどんな指定ができるかは、Style Referenceで詳しく説明してくれています◯
cssに例えてみると・・・
なんとなくcssに似てるかしらと感じたので、cssに例えて解釈してみました。
というのも、cssも
- セレクター(スタイルをあてる対象)
- プロパティ(対象を構成するデザイン要素)
- 値
の3つセットで指定しているところが似ているからです。
例えば、cssで .road というclassを持つ要素の塗りを変えるには以下のようになります。
.road { /* セレクター */
background: #ff0000; /* プロパティ:値; */
}
これをGoogleMapAPIで実現するには、↓のような感じです◯
[
{
"featureType": "road", //featureType
"elementType": "geometry.fill", //elementType
"stylers": [{ //stylers
"color": "#ff0000"
}
]
}
]
まとめると
- featureType → セレクター
- elementType → プロパティ
- stylers → 値
のように捉えると、少し分かりやすいのかなあと。
ただ、cssとGoogleMapは別物なので、上記のような捉え方は少し語弊もあるかもしれません。
あくまで、雰囲気をつかむための解釈の一つと思っていただければと思います◯
ちなみに上記の結果は↓のようになります。
道路の塗りが赤になっていますね◯
もっとスタイルを変えるには
css同様、featureType、elementType、stylersの3つセットを複数書けば、それだけ多くのスタイルを指定できます。
[
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ff0000"
}
]
},{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#3399ff"
}
]
},
. . .
]
また、featureType、elementTypeを指定しないこともできます。
この場合は、全てのfeatureType、全てのelementTypeがそれぞれ指定されます。
参考
- 公式リファレンス
- 簡単にスタイルを変えられる便利なサービス