Googleマップをカラー変更したりグレースケールや建物などのラベルをなくすカスタマイズ方法

2018.07.17 web制作

Googleマップを表示しているサイトでたまに見かけるのが、ベースカラーを変更していたり、グレースケール（モノクロ）で地名や建物の名称がないものです。

Google Maps APIを使うことで作成することができるので、簡単にですが作成方法をご紹介します。

デフォルト表示

まず、Googleマップを表示させるエリアを作ります。

<div id="gmap"></div>

続いて、Google Maps APIを読み込みます。

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX"></script>

続いて、指定の箇所にGoogleマップを表示させる処理を書きます。

<script>
	function init() {
		var latlng = new google.maps.LatLng(緯度, 経度);
		var mapOptions = {
			zoom: 17,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

		var mapMarker = new google.maps.Marker({
			position: latlng,
			map: map,
			title: 'タイトル'
		});
	}
	google.maps.event.addDomListener(window, 'load', init);
</script>

これで、デフォルト状態での表示ができました。

サンプルを見る

カラー変更表示

デフォルト表示ができたところで、マップのベースカラーを変更してみます。

Googleマップを表示させる処理に、以下のように追記します。

<script>
	function init() {
		var latlng = new google.maps.LatLng(緯度, 経度);
		var mapOptions = {
			zoom: 17,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

		var mapMarker = new google.maps.Marker({
			position: latlng,
			map: map,
			title: 'タイトル'
		});

//ここから追加
		var mapStyleOptions = [
		{
			stylers: [
				{ hue: "#6699cc" },
				{ saturation: -50 }
			]
		}
		];

		var lopanType = new google.maps.StyledMapType(mapStyleOptions);
		map.mapTypes.set('sample', lopanType);
		map.setMapTypeId('sample');
//ここまで追加
	}
	google.maps.event.addDomListener(window, 'load', init);
</script>

これで、カラー変更された表示になります。

サンプルを見る

グレースケール表示

ベースカラーの変更ができたところで、今度はベースカラーをグレースケールにしてみます。

Googleマップを表示させる処理に、以下のように追記します。

<script>
	function init() {
		var latlng = new google.maps.LatLng(緯度, 経度);
		var mapOptions = {
			zoom: 17,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

		var mapMarker = new google.maps.Marker({
			position: latlng,
			map: map,
			title: 'タイトル'
		});

		var mapStyleOptions = [
		{
//ここから変更
			stylers: [
				{ saturation: -100 }
			]
//ここまで変更
		}
		];

		var lopanType = new google.maps.StyledMapType(mapStyleOptions);
		map.mapTypes.set('sample', lopanType);
		map.setMapTypeId('sample');
	}
	google.maps.event.addDomListener(window, 'load', init);
</script>

これで、グレースケールでの表示になります。

サンプルを見る

ラベルを消す

続いては、グレースケールにしたマップの建物や地名などのラベルを非表示にします。

Googleマップを表示させる処理に、以下のように追記します。

<script>
	function init() {
		var latlng = new google.maps.LatLng(緯度, 経度);
		var mapOptions = {
			zoom: 17,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

		var mapMarker = new google.maps.Marker({
			position: latlng,
			map: map,
			title: 'タイトル'
		});

		var mapStyleOptions = [
		{
			stylers: [{ saturation: -100 }]
		}
//ここから追加
		,{
			featureType: 'all',
			elementType: 'labels',
			stylers: [{ visibility: 'off' }]
		}
//ここまで追加
		];

		var lopanType = new google.maps.StyledMapType(mapStyleOptions);
		map.mapTypes.set('sample', lopanType);
		map.setMapTypeId('sample');
	}
	google.maps.event.addDomListener(window, 'load', init);
</script>

これで、ラベルが非表示になります。

サンプルを見る

まとめ

個人的に、サイトでよく見るGoogleマップのベースカラーを変更する、グレースケール表示にする、ラベルを非表示にするといったカスタマイズの方法をまとめてみましたが、グレースケールでラベル非表示にするとなんだかとても味気ない感じになってしまいますね(笑)

コードとしては、マップ表示部分の記述が多いもののそれ以外の部分は意外と簡単にできました。しかし、2018年7月16日以降GoogleマップのAPIキーの取得が完全に必須となってしまったので、APIキー未取得の場合にはちょっと手間がかかってしまいます。デザイン的な要望がなければAPIキーが不要のGoogleマップからの埋め込み（iframe形式）が簡単かもしれませんね。

Googleマップ APIキー取得方法について参考記事はこちら

Google Maps PlatformでAPIキーを取得する方法 - Qiita

##目的2018年6月11日からGoogleマップのAPIを利用するのに**APIキーが必須**になり、無料枠内で利用するのにも**請求先アカウントの設定が必要**になります。クライアントに手続きをお願いする際に「ここを見てやってね...