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を使うと、実際に地図を見ながら色の調整が行えて便利です。
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年2月
 123
45678910
11121314151617
18192021222324
2526272829