Google Mapsの色を変更する

2015.09.14

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

サンプルコード

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

HTML

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

JavaScript

1
2
3
4
5
6
7
var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 35.629899, lng: 139.778779},
        zoom: 14
    });
}

通常表示のデモページ
　

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

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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


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

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930