グーグルマップのカスタマイズでグレースケールのマップに変更する

Google Apps API2017.10.31

最終更新日：2018.2.20 Update!!

サイトに埋め込む事もAPIを使う事で簡単にできるグーグルマップですが、たまに通常のマップではなく、カラーが変更されたものを見かけたりしないでしょうか。このようなグーグルマップはjavascriptを使ってカスタマイズされたものになります。今回はGoogleから提供されているGoogle Maps APIを編集し、グーグルマップのカラーをグレースケールに変更するカスタマイズをしてみたいと思います。

Google Maps APIのAPIキーを取得する

現在、ウェブサイト上でグーグルマップを表示させるには基本的にAPIキーが必要になります。そこでまずはAPIキーを取得するところから始めます。まずはGoogle Maps APIのサイト（https://developers.google.com/maps/web/）へアクセスします。表示された画面右上の「キーの取得」ボタンをクリックします。グーグルマップのカスタマイズでグレースケールのマップに変更する

ダイアログが表示され、「+ Create a new project」をクリックして、API作成のための新規プロジェクトを作成します。グーグルマップのカスタマイズでグレースケールのマップに変更する

任意のプロジェクト名を決めて「CREATE AND ENABLE API」をクリックします。グーグルマップのカスタマイズでグレースケールのマップに変更する

プロジェクトの作成に成功したらAPIキーが生成されますが、引き続き「API Console」のリンクからコンソールの画面へアクセスし、APIの設定を行っていきます。グーグルマップのカスタマイズでグレースケールのマップに変更する

リンク先の画面が表示されたら、画面中程の「キーの制限」項目にある選択肢より「HTTPリファラー」を選択します。そしてグーグルマップを表示させるサイトのURLを入力します。ワイルドカードが使用できるのでURLに合わせて設定しておきます。そして「保存」をクリックして完了です。グーグルマップのカスタマイズでグレースケールのマップに変更する

JavaScriptでマップをカスタマイズして表示

APIキーが取得できたらコードを見ていきます。まず、HTMLでは文頭のDOCTYPE宣言でHTML5であることを明示する必要があります。そしてマップを表示させる要素を作成しておきます。（下記の例ではid="map"の要素になります）また、このマップを描画する要素ですが、必ずCSSで高さを指定してあげることが重要です。最後にscriptでグーグルマップの設定をしていきます。【HTML & javascript】（一部抜粋）

<!DOCTYPE html>
 <html>
 <head>
   <style>
     #map {
       width: 100%;
       height: 300px;
     }
   </style>
 </head>
 <body>
   <div id="map>
   </div>
   <script>
     function initMap() {
       var customMap = new google.maps.Map(document.getElementById('map'), {
         zoom: 17,
         center: {
           lat: 34.686494,
           lng: 135.52618
         },
         styles: [{
           stylers: [{
             saturation: -100
           }]
         }]
       });
       var marker = new google.maps.Marker({
         position: {
           lat: 34.686494,
           lng: 135.52618
         },
         map: customMap
       });
     };
   </script>
   <script async defer src="https://maps.googleapis.com/maps/api/js?key=[APIキー]&callback=initMap">
   </script>
 </body>
 </html>

JavaScriptではグーグルマップの設定をしていくのですが、まずはマップ表示用の関数を定義します。そしてHTMLのmapを表示させる要素を指定します。順番に目的地の緯度（lat）と経度（lng）を入力します。この時の緯度と経度の調べ方ですが、住所から緯度経度が割り出せるウェブサービスを利用するのが便利です。【geocoding】 http://www.geocoding.jp/ そしてzoomの値にはデフォルトでの表示倍率を設定します。centerの値には先ほどの緯度と経度を入力することで目的地が中心となって表示されるようになります。次のstylesの値で様々なスタイル変更ができるのですが、stylers項目でsaturationをマイナス値にすることで彩度を落とすことができます。こうすることでグレースケールで表示されるようになります。最後にマーカーの表示設定を行います。この関数を次のグーグルマップAPIのjsファイルの読み込みのコールバックで呼び出すのですが、その時に先ほど生成したAPIキーをパラメーターに設定します。これでグレースケールのGoogleマップが表示されるようになりました。

このように一手間かけるだけで、よりサイトデザインとの調和が生まれるようになります。そのままでも十分に使えるグーグルマップですが、このようにカスタマイズも結構簡単にできるので、ぜひチャレンジしてみてはいかがでしょうか。今回のサンプルはこちらにご用意いたしました。