[ jQuery ] 埋め込みGoogleマップを装飾する

投稿日:2014年10月20日

ホームページにGoogleマップを載せたい時は、
Google → マップ → 設定 → 地図を埋め込む
で、埋め込みコードをコピーして貼り付ければできます。

ホームページのテイストに合わせてGoogleマップを少し装飾したいときには、Google Map API を利用します。
以前の記事では、埋め込んだGoogleマップのピンの画像を変更するやり方について書きました。
今回は、Googleマップの見た目自体を装飾するやり方です。



地図のスタイルを変更するというやり方で、Googleマップをカスタマイズできます。
例えば上記のような白黒の地図も設定可能です。
具体的には次のようにしています。

簡単に言うと、Googleマップの見え方を自分好みのスタイルに変更する、
ということをやっています。
上記のコードで「白黒用スタイル」のところでは、
Googleマップ全体の彩度を通常の数値から「-100%」に設定する、ということをやっています。

スタイル変更に関係しているのは、上記のソースのうち、以下の部分です。

●「featureType: “all”」 は、スタイルを適用する対象です。ここでは「全て」を設定していますが、「道」、「建物」「県境」、など、いろいろと指定できます。詳しくは、公式ドキュメント featureTypeの設定をご覧ください。

●「elementType: “all”」 は、対象の中の要素です。例えば、「建物」の「テキスト」だけ、や「アイコン」だけ、といった指定ができます。詳しくは公式ドキュメント elementTypeの設定です。

●「stylers: [ { saturation: -100 } ] 」 が、設定したいスタイルです。上記では、「saturation」つまり「彩度」を「-100%」に設定して、白黒を実現しています。項目を中括弧{} で囲ってカンマで区切って複数指定することもできます。指定できる項目には、「基本色」や「輝度」、「コントラスト」などを設定できます。詳しくはこちら



これらを応用するといろんなGoogleマップを見せることができます。

色を反転させて夜間モードみたいに。



地名などを少なくしてすっきり見せる。



ベースの色を指定してサイトに合わせる。




・・・などなど。いろいろと試してみるのも面白いかもしれないです。

南本貴之

関連記事

カテゴリー: JavaScript, jQuery, WEB, サイト制作
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル