Google Mapsの色を変更する

Google Maps JavaScript APIを使って、地図自体の色を変更してみます。

サンプルコード

比較のために、まずは通常の地図を表示してみます。

HTML

<div id="map"></div>

JavaScript

var map;
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 35.629899, lng: 139.778779},
		zoom: 14
	});
}

通常表示のデモページ
　

地図の色を変更する場合、以下のように記述します。

JavaScript

var map;
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 35.629899, lng: 139.778779},
		zoom: 14,
		styles: [{
			stylers: [
				{
					hue: '#006eff' // 色相
				}, {
					saturation: -50 // 彩度
				}, {
					lightness: 20 // 明度
				}, {
					gamma: 0.5 // ガンマ
				}
			]
		}]
	});
}

地図の色変更後のデモページ
JavaScript内にコメントで記述している通りですが、色相・彩度・明度・ガンマの調整で地図の色を調整できます。
他にも地図のスタイルを調整できるようですが、詳しくはMapTypeStylerのオプションをご確認ください。
　

日本語版 Google Maps API Styled Map Wizardを使うと、実際に地図を見ながら色の調整が行えて便利です。
　

【参考サイト】

• APIと少しのjQueryコードでGoogle Mapの地図の色を変更する – かちびと.net
• Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers
• Googleマップのお手軽カスタマイズできる「Styled Maps Wizard」の使い方 | 株式会社LIG
• 日本語版 Google Maps API Styled Map Wizard