GoogleMapの雰囲気をガラッと変える！カスタマイズに挑戦してみた
2015年1月24日 コーディング
会社やお店のアクセスマップページ。GoogleMapを埋め込んでいる人も多いのではないでしょうか。とても簡単で便利である一方、そのまま埋め込んだだけではなんだか味気ないですよね。
しっかりデザインされたサイトの中でGoogleMapを使用すると、なんだか浮いちゃってるように見えることもあるように思います。
サイトのデザインに合わせてイラレで地図を作るのもいいけれど、とっても面倒。
そこで今回、見た目の印象がガラッと変わる、GppgleMap埋め込みの「カスタム方法」について紹介します。
GoogleMapの設置
まずはGoogleMapの表示。ここでつまずいては始まりません。
GooglemapAPIを設置します。ヘッダーに1行付け足すだけ。
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
続いてスクリプトを記述します。
下記がベースとなるオプション定義ですので、カスタマイズしたい場合はこれに付けたしていくこととなります。
場所は築地のハンバーガーショップ【BROZERS’（ブラザーズ）新富町店】の緯度経度を設定してみました。
bodyタグにはonroadを指定します。
これは「ページが読み終わってから実行してくださいね」という命令です。
<body onload="initialize();">
最後にコンテンツ部分にHTMLの記述すれば表示可能。
ここまでは簡単ですよね。何も問題なくGoogleMapは表示できるはずです。
それでは、スタイルの変更をしてみましょう。
StyledMapWizardを使ってみる
GoogleMapはオプションをゴリゴリ指定して変更することもできるのですが、それは敷居が高い。
今回はGoogleが公式で用意しているGoogleMapスタイル変更ツール、StyledMapWizardを使ってみましょう。
⇒http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
GoogleMapのスタイルは、スタイルを指定するJSONコードを作成し、スクリプトに追加することで変更することができます。そのJSONコードを直感的な操作で簡単に作成できちゃうのが、このStyledMapWizard（スタイルマップウィザード）なのです。
サイトにアクセスしたら、左スペースにある「Selectors」を使用してスタイルを指定します。
例えば、【線路を消したい】場合には、
Feature typeを「transit」に。
StylersのVisibilityを「Off」にする。
【住所の表記を消したい】場合には、
Feature typeを「Administrative」に。
StylersのVisibilityをOffにすることで消えます。
それほど難しい操作ではないので、とにかくサイトに行って、色々数値を変更して試してほしいと思います。
好みのスタイルを実現したら、出力しましょう。右下にある「Show JSON」というボタンをクリックするとコードが出力されます。これをスクリプトに記述することで、GoogleMapのスタイルは変わるのです。
できあがったJSONコードをスクリプトに書き加えます。
サンプルスクリプトに付け足すとこんな感じになります。
他人のスタイルカスタムを参考にしてみる
StyledMapWizardで1個づつスタイルを変更していくのすら面倒という人にはこちらがオススメ。
これは、以前誰かが作ったGoogleMapのスタイルコードを、サンプルとして設置しているサイトです。
自分が気に入ったスタイルのマップを選択すると、そのJSONコードを表示してくれるので、あとはコピーして自分のサイトに張り付けるだけ！
簡単ですね。
GoogleMapのスタイルを自由に変更できるようになると、サイトがどんなデザインであっても地図をサイトに馴染ませることができます。
アクセスマップページは、適当に作りがちですが実は最も多く見られているページのひとつでもあります。会社やお店に訪れる人のほとんどが見ていますからね。
会社・お店に訪れる前、お客さんが最後に見るページでもあるわけです。ということは意外と印象に残る部分。
少しの工夫でGoogleMapの見た目は大きく変わるので、ぜひスタイルをカスタマイズしてみてください。
