Googleマップのお手軽カスタマイズできる「Styled Maps Wizard」の使い方

こんにちは。ディレクターのエリカです。
Google マップがカスタマイズできることはよく知られていると思いますが、難しそうでなかなか手が出せない・・・と思っていませんか？
Google 公式が提供している「Styled Maps Wizard」を使えば、驚くほど簡単に Google マップをカスタマイズできるのでご紹介いたします。

Styled Maps WizardでGoogleマップをカスタマイズ！

Styled Maps Wizardはこちらから利用できます

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

STEP1. 全体の色を変えてみよう

画面左の Selectors より、Hue の色を適当にクリックします。


これだけ！
とっても簡単ですが、マップの雰囲気がガラッと変わりますよね？
これなら打ち合わせ中に、お客様とのイメージ合わせにも使えると思います。

STEP2. パーツ毎に変化をつけよう

画面左の Selectors でスタイルを選んだら、画面右の Map Style の「Add」ボタンをクリックします。
そうすると先に設定したスタイルが記録され、別のスタイルを追加できるようになります。
これを繰り返してオリジナルのマップスタイルを作りましょう。

カスタマイズの例

カスタマイズの例をみてみましょう。

線路を消す

Feature type＞transit
Stylers＞Visibility＞Off

住所表示を消す

Feature type＞Administrative
Stylers＞Visibility＞Off

ランドマークを簡易表示にする

Feature type＞Point of Interest （POI）
Stylers＞Visibility＞Simplified

一通表示を消す

Feature type＞Road
Element type＞Labels＞Icon
Stylers＞Visibility＞Off

高速道路を目立たなくする

Feature type＞Road＞Highway
Saturation＞-50
Lightness＞+50

とてもシンプルなマップになりました。

STEP3. 出力しよう

マップスタイルを決めたら出力しましょう。
画面右下の「Show JSON」ボタンをクリックすると、JSONコードが表示されるので、これをJSファイルにコピペしましょう。
Google マップ用JSの作り方は下記のページが詳しいです。

おまけ

参考になるページをご紹介していきます。

スタイル集

カスタマイズに迷ったときは、スタイル集を参考にしましょう。

Styles（公式）

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/examplestyles.html

Snazzy Maps（非公式）

http://snazzymaps.com/

日本語版

上でも紹介した、「プロスタッフ-ブログ（http://blog.prostaff1.com/）さん」が Styled Maps Wizard の日本語化をなさっています。

旧バージョンではありますが、機能は十分あるのでこちらを利用しても問題ないと思います。

高度なカスタマイズ

Styled Maps Wizard だけではできない様々なカスタマイズ方法が紹介されています。
ちょっと難しいですが、参考にしてみてください。

• Google Developers スタイル付き地図（公式ヘルプ）：

  https://developers.google.com/maps/documentation/javascript/styling?hl=ja

• Googleマップをイラストマップみたいにしたい。：

  http://lopan.jp/google-map-customize/

• Google Maps 活用講座：

  http://googlemaps.googlermania.com/

まとめ

いかがでしたか？
これなら、Google マップのアレンジもお手軽にできそうですね。ぜひ、他とは違うオリジナルのスタイルにチャレンジしてみてください！