Webサイト上のGoogleマップをグレースケール(モノクロ)にカスタマイズする方法
Google map, Web制作
前回、前々回のブログで、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の岡田くんがひらパー兄さんとして宣伝している遊園地です!
お近くにお越しの際はぜひ遊びに行ってみてください!