目標:Googleマップをグレースケールに変更

前々回のブログ（Google Maps APIを使ってWebサイトに地図を埋め込む方法）でWebサイトにマーカー付きのGoogleマップを表示させる方法を説明しました。

また前回のブログ（Webサイト上のGoogleマップのマーカー（ピン）をオリジナル画像に変更する方法）ではマップ上のマーカー（ピン）をオリジナル画像に変更しました。

今回は第三弾として、マップの色合いを変更する方法を説明していきます。

完成図のイメージはこんな感じになります。

グレースケールにすることで洗練されたイメージを持たせたり、またマーカーをより目立たせることができます。

マップをグレースケールに変更する手順

ではさっそくマップをグレースケールに変更する手順を説明していきます。

といっても、今回はjavascriptにグレースケールにするための記述を追加するだけです。

マップを表示するjavascriptにコードを追加

前回のブログで、マップを表示させるためのjavascriptのコードに、マーカーを指定する記述を追加したものを紹介しました。

【前回までのコード】

<script>
    function initMap() {
        var latlng = new google.maps.LatLng( 34.808502, 135.639683 );
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14,
            center: latlng
        });
			
        //マーカーの設定
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: new google.maps.MarkerImage(
               'マーカー画像のURL',//マーカー画像URL
                new google.maps.Size(60, 80),//マーカー画像のサイズ
                new google.maps.Point(0, 0),//マーカー画像表示の起点（変更しない）
                new google.maps.Point(30, 80)//マーカー位置の調整
            ),  
        });
      }
</script>

ここに、マップをグレースケールにするための記述を追加したものが下記のコードです。

【マップをグレースケールにするための記述を追加したコード】

<script>
    function initMap() {
        var latlng = new google.maps.LatLng( 34.808502, 135.639683 );
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14,
            center: latlng
        });
			
        //マーカーの設定
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: new google.maps.MarkerImage(
               'マーカー画像のURL',//マーカー画像URL
                new google.maps.Size(60, 80),//マーカー画像のサイズ
                new google.maps.Point(0, 0),//マーカー画像表示の起点（変更しない）
                new google.maps.Point(30, 80)//マーカー位置の調整
            ),  
        });
			
        /*=========ここから追加=========*/
        var mapStyle = [ {
            "stylers": [ {
            "saturation": -100
            } ]
        } ];
        var mapType = new google.maps.StyledMapType(mapStyle);
            map.mapTypes.set( 'GrayScaleMap', mapType);
            map.setMapTypeId( 'GrayScaleMap' );
        /*=========ここまで追加=========*/
      }
</script>

マップのスタイルをstylersで調整しています。

単純にグレースケールにする場合は上記のように、

"saturation": -100

を指定するだけで完成です。

saturationは彩度という意味です。彩度の最低値が「-100」で今回はその最低値を指定してグレースケールにしています。

さいごに

今回はWebサイトに表示させたGoogleマップをグレースケールに変更する方法を説明しました。
Webサイトはブランドのイメージなども表現することができます。
スタイリッシュさ、クールさなどを表現したい場合は是非マップをグレースケールに変更してみてください。

余談ですが、3回に渡ってGoogleマップの表示について説明してきましたが、地図の中心に設定していた場所をご存知でしょうか？
枚方市民なら誰もが一回は行っている（はず）の「ひらパー」こと「ひらかたパーク」です！
V6の岡田くんがひらパー兄さんとして宣伝している遊園地です！

お近くにお越しの際はぜひ遊びに行ってみてください！