Googleマップをカスタマイズしてスタイリッシュな地図を作る

コーポレートサイトでもショップサイトでも、Webサイト内のアクセス案内のために地図を使用する機会はとても多いと思います。BiNDではGoogleマップを貼り付けることができますが、今回はもう一歩進んで、自分なりの色にカスタマイズする方法をご紹介します。
サイトのデザインに合わせた地図を使いたい時、シンプルな地図でスタイリッシュに見せたい時などに活用してみてください。

サイトに地図を設置する

まずはサイト内にGoogleマップを貼り付けます。手順はマニュアルを参照してください。
Google Styled Mapを貼り付ける

Googleマップを貼り付ける際の３番目のステップ「地図の編集」画面で、配色などをカスタマイズすることができます。

今回は２パターンのカスタマイズ例をご紹介します。

地図全体の色をカスタマイズする

１つ目のサンプルは、地図全体の色合いを変更する手順です。色合いを調整するだけで雰囲気がガラッと変わるので、スタイリッシュな印象になります。

	まずは全体の色を変更します。 色相を変更すると、地図全体の色合いが変わります。ベースの色を決めたら、プレビューを確認しながら彩度・明るさ・ガンマなどで微調整していきます。
	全体の色が決まったら、パーツごとの色を変更します。 右側にある「+」ボタンをクリックするとタブが増えます。タブごとに対象を指定することで、カスタマイズする範囲を限定できます。 川の色を変えたいので、対象のタイプ「図形」、要素「水域」を選択し、色を指定します。選択した色で川や海などが塗りつぶされます。
	川の色を変更した際に、隅田川の文字が読みづらくなってしまったため、次はここの文字色を調整します。 「+」ボタンで更にタブを増やし、タイプ「文字・アイコン」、要素「水域」を選択します。色相や彩度などで文字色を調整します。
	最後に道路の色を調整します。 「+」ボタンでタブを増やし、タイプ「図形」、要素「全道路」を選択します。明度とガンマを調整して、コントラストをあげます。

色のカスタマイズが完了したら、最後のステップまで進んで保存しましょう。地図の完成です。

地図に表示する要素をカスタマイズする

２つ目のサンプルでは、地図に表示する要素をカスタマイズして、以下のようなごくシンプルな地図を作成してみます。