Google Mapの色を変えてみるの巻

Pocket
[`evernote` not found]

完全に自分向けのメモです…
Google Map V3にはstyled mapというAPIが用意されています。
これを利用すると、Google Mapの色を自由に変更できます。

方法は、専用のスタイル情報のjsonを読みこませるという形なんですが(詳しくは後ほど)
そのスタイル情報を生成するジェネレータまで用意されています。

マップ スタイル設定ウィザード

これを使うと、細かく色味の調整が可能になります。
個人的な感想ですが、地図のすべての要素の色をそれぞれ指定できます。すごく魅力的なんですが、ノンデザイナーな僕には途方も無い作業になり、挫折しました…
かわりに、全体の色味を調整することも可能ですので、そこから始めたほうがいいかもしれません。

マップ スタイル設定ウィザードの使い方

色の調整は、jsonファイルで設定可能です。もちろん、ロジックがわかっていて、この色にするってのが明確であれば、わざわざマップ スタイル設定ウィザードを使わなくてもいいかもしれませんが・・・可視的に調整しながら、設定したほうがいいと思いますので、ご紹介します。

1.色みの調整

Feature typeで適用させたい要素を選択します。
全体的に変更したい場合は、「ALL」を選んでおきます。

色みを調整する場合は、「Hue」にチェックを入れて、使いたい色を指定します。
「Saturation」は彩度になりますので、カーソルを左にずらすと色味がなくなります。
「Lightness」は明るさ、「Gamma」はガンマ値の調整になります。
調整して、いい感じになったら、右側の「add」をクリックするとスタイル情報が保存されます。今回はALLを選びましたが、地図の要素を個別に調整する場合は、それぞれ保存しておきます。

styledmap

2.不要な要素の削除

たとえば、道だけ消したいとか、そんなわがままも叶えてくれます。
消したい要素を選んで、「Visibility」を「off」にします。

その他、かなり細かく設定できます。割りと破綻しやすいっすけど・・・
色々調べてみたら、カヤックさんの中の人が変態的なジェネレータを作っていらっしゃいました。
個別にカスタマイズする場合はこちらの方が便利ですね。

Google Mapへの適用方法

マップ スタイル設定ウィザードで設定したjsonを吐き出しておきます。
後は、googleマップに適用させるだけです。

色情報のjsonを変数にセットして

var styles = [
 {
  stylers: [
   { "hue": "#00b2ff" },
   { "saturation": 49 },
   { "lightness": 20 },
   { "gamma": 1.15 }
  ]
 }
];

Google Mapのオプションに指定してあげるだけです。

       var options = {
         zoom: 16,
         center: new google.maps.LatLng(36.239081,137.96947),
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         scaleControl: true,
         styles: styles
       };

DEMO

非常に簡単です。
この方法ですと、デフォルトの色自体を変えてしまいますので、「いや、普通のも見せたいよ」っていう場合は、Google MapのmapTypeとして(航空地図と同じような位置づけ)定義する方法もあります。

詳しくは、Googleの公式ドキュメントをご覧ください。

このAPI自体は、前から知っていましたが、当時は使用制限があるようなことを聞いていたので手をつけずにいました。調べてみると、styledmap自体の制限はないようですね。
色を変えることで、サイトとの調和も取れるようになります。(黒ベースのサイトだと結構うきますからね、デフォルトの色味だと)
逆に見慣れない色ですとユーザーの使い勝手的にどうなのか?とかかっこよさを重視しすぎることで、視覚に障害がある人にとって使いにくくなる可能性もあります。
状況を考えて使っていった方がよさそうですね。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。