WEB

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

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

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

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

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

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

画面左の Selectors より、Hue の色を適当にクリックします。
picture
picture
これだけ!
とっても簡単ですが、マップの雰囲気がガラッと変わりますよね?
これなら打ち合わせ中に、お客様とのイメージ合わせにも使えると思います。

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
picture
とてもシンプルなマップになりました。

STEP3. 出力しよう

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

  • 参照ページ:Google Maps API Styled Map Wizardを使ってみた
  • おまけ

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

    スタイル集

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

    Styles(公式)

    picture

    Snazzy Maps(非公式)

    picture

    日本語版

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

  • Styled Maps Wizard 日本語(非公式):
  • 旧バージョンではありますが、機能は十分あるのでこちらを利用しても問題ないと思います。

    高度なカスタマイズ

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

    まとめ

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

    この記事を書いた人

    エリカ
    エリカ ディレクター 2012年入社
    ディレクターのエリカです。趣味は美術鑑賞で、絵画や展示などたくさんの作品を眺めるのが好きです。得意料理は「鍋」です。よろしくお願いします。

    こちらもおすすめ

    今すぐ使えるかんたん文庫 Googleサービス 仕事がはかどる!  快速ワザ

    今すぐ使えるかんたん文庫 Googleサービス 仕事がはかどる! 快速ワザ

    • 著者井上 健語
    • 価格¥ 745(2015/11/19 16:43時点)
    • 出版日2015/10/22
    • 商品ランキング73,801位
    • 文庫256ページ
    • ISBN-104774176486
    • ISBN-139784774176482
    • 出版社技術評論社
    新しくなってさらに充実! より便利な機能が満載! Google マップ

    新しくなってさらに充実! より便利な機能が満載! Google マップ

    • 著者IT研究会
    • 価格¥ 1,350(2016/01/07 15:30時点)
    • 出版日2015/11/26
    • 商品ランキング343,222位
    • オンデマンド (ペーパーバック)114ページ
    • ISBN-104777129608
    • ISBN-139784777129607
    • 出版社ゴマブックス