Webサイト上のGoogleマップをグレースケール(モノクロ)にカスタマイズする方法

,
Webサイト上のGoogleマップをグレースケール(モノクロ)にカスタマイズする方法

前回、前々回のブログで、Google Maps APIを使ってWebサイトにGoogleマップを埋め込む方法、マップのマーカー(ピン)をオリジナル画像に変更する方法を説明してきました。今回は第三弾として、マップをグレースケール(モノクロ)に変更する方法を説明していきます。

目標: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の岡田くんひらパー兄さんとして宣伝している遊園地です!

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

この記事をシェアする