GoogleMapの見栄えをカスタムする方法

ネットを見ているとGoogleMapのデザインがモノトーン調になっていたりサイトカラーに合わせた色味になっていたりと、カスタマイズされたGoogleMapを利用しているサイトを見かけることがあります。これはGoogleMapのAPI版を利用して実現することのできるテクニックです。
今回はそのAPI版GoogleMapの見栄えの変更方法についてご紹介します。

GoogleMapをモノトーンに

まずは基本のGoogleMapを用意しました。弊社周辺の地図になっています。コードとサンプルは以下になります。

See the Pen Google Maps API v3 – Basic Map by hoshu_t (@hoshu_t) on CodePen.

これに色の指定を追加してモノトーンにします。以下のコードをjavascriptに追加します。

// 地図をグレースケールに
var mapStyle = [
  {
      "stylers": [
        { "saturation": -100 }
      ]
  }
];
var mapType = new google.maps.StyledMapType(mapStyle);
map.mapTypes.set('GrayScaleMap', mapType);
map.setMapTypeId('GrayScaleMap');  

StyledMapTypeに"saturation": -100、つまり彩度マイナス100を指定して、モノトーンを実現しています。用例は以下になります。

See the Pen Google Maps API v3 – Basic Map by hoshu_t (@hoshu_t) on CodePen.

GoogleMapは"stylers"以下にパラメータを設定することで見栄えを編集することができます。また"stylers"自体を複数指定することで地図のパーツごとの見栄えを細かく編集することができます。

もっとカラフルに

以下はMapのベースカラーを弊社のサイトカラーの青に、道路の色にだけ明度マイナス20を指定した例です。道路の色変更をわかりやすくするために縮尺を引いています。

See the Pen Google Maps API v3 – Basic Map by hoshu_t (@hoshu_t) on CodePen.

まとめ

API版GoogleMapの見栄えを編集する方法をご紹介しました。少しの色変更で見慣れたGoogleMapもぐっとサイトに馴染んだりします。おしゃれなだけでなく見せたい地形やオブジェクトをハイライトする使い方もできるので、実装するサイトに合わせた編集を試してみましょう。