APIを使ってGoogleマップの色を変えてみよう！

投稿日: 2017.04.30

コーディング

4月もあっというまに最終日となり、現在ゴールデンウィーク真っ只中です。
色々な行楽地に行かれる方も多いのではないでしょうか？
そんな時に活用するのがGoogleマップ。WEBサイトにもGoogleマップが埋め込まれてるのが当たり前になってきました。
この時、通常のマップではなく少しカスタマイズされたGoogleマップであると、ユーザーにより興味を持たせることが出来ると思います。

ということで、今回はGoogleマップの簡単なカスタマイズについてご紹介いたします！

カスタマイズの前に

GoogleマップのAPIには多くの種類が存在しますが、マップの表示のカスタマイズには「Google Maps JavaScript API」を使用します。
まずはじめにこのAPIを有効にしたAPIキーの取得が必要となるのですが、今回はこの説明は省略させていただきます。
（APIの取得の方法は近日公開予定）

マップを表示させてみよう

「千里の道も一歩から」ということで、まずは一番簡単なマップを表示させてみましょう。

<div id="map" class="gMap" style="height:300px;"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIキー&callback=initMap"></script>
<script>
function initMap() {
    var latlng = {
            lat: 36.661999,
            lng: 137.31315
        },
        map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 8
        }),
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
}
</script>

まずGoogleマップを表示するDIV要素を用意します。このDIV要素の大きさをCSSで定義します。
次にAPIを読み込みます。その時APIキーの設定とコールバック関数名（例ではinitMap）を自身のケースに合わせて設定します。
コールバック関数initMapはAPIが完全に読み込まれた後で実行されます。マップの設定などはこの関数内に記載していくことになります。

まず地図の中心地とマーカー位置を指定するための緯度軽度をlatlng変数に格納します。（変数化する必要がなければそのまま直接記載してもOKです）
次に「google.maps.Map」クラスを使ってマップオブジェクトを作成します。
1つ目の引数にマップを表示させる要素を指定し、2つ目の引数にはマップのオプションを記載します。
今回は最低限必要な「center（マップの中心地）」と「zoom（マップの拡大レベル）」のみ指定しています。

これだけでマップは表示されるのですが、今回はさらにマーカーを「google.maps.Marker」クラスにて生成しています。

マップの色を変えてみよう

まずは簡単にマップを表示させてみましたが、これだけですとGoogleマップの「地図を埋め込む」機能でIframeを使用するのと変わらないですよね。
というわけで「地図を埋め込む」機能では実現できない、マップの色の変更を試してみます。

{
    center: latlng,
    zoom: 8,
    styles: [{
        featureType: 'all',
        elementType: 'all',
        stylers: [{
            hue: '#00ff00' //16進数のRGB値を記載
        }, {
            saturation: -50 //-100〜100の値を記載
        }, {
            lightness: 0 //-100〜100の値を記載
        }, {
            gamma: 1 //0.01〜10.0の値を記載
        }]
    }]
}

マップの色が緑色っぽく変わりましたね。
ソースコードはMapオブジェクトを生成する際のオプション（第2引数）のみを記載しています。今回追加したのは「styles」というスタイルオプションの部分です。
「featureType」、「elementType」、「stylers」の3つの要素から構成されており、「featureType」では変更するマップ上の要素を、「elementType」では要素のさらに細かい区分を、「stylers」では実際の色味を指定します。

今回は地図上のすべての要素の色味を等しく変更するために、featureTypeとelementTypeをallとしています。ただしfeatureTypeとelementTypeはデフォルトで"all"となっているため、実際にはこの記述は必要ありません。

色味の指定は「色相(hue)・彩度(saturation)・明度(lightness)」モデルが使用されており、まずは基本色をhueで指定し、saturationとlightnessの変化率を記載する形になります。

マップの色をさらに変えてみよう

stylesオプションですがその名の通り配列形式となっており、複数のスタイルを適用することができます。
以下の例は先ほどの変更に加えて、海の色を暗い灰色に変えています。

{
    center: latlng,
    zoom: 8,
    styles: [{
        featureType: 'all',
        elementType: 'all',
        stylers: [{
            hue: '#00ff00'
        }, {
            saturation: -50
        }, {
            lightness: 0
        }, {
            gamma: 1
        }],

    }, {
        featureType: 'water',
        elementType: 'all',
        stylers: [{
            color: '#666666'
        }],

    }]
}

先ほどの記述に「featureType」を「water」に変えたスタイルを追加しています。
waterとは「水域」のことで、海や川、湖などが対象となります。
またstylersには「色相・彩度・明度」モデルによる指定ではなく「color」による絶対値の指定を行っています。
「featureType」に「all」を指定している時に「color」による絶対値指定を行うと、マップが全てその色で埋め尽くされてしまいますが、要素を指定している場合にはこのように使用できます。
他のfeatureTypeなどスタイルに関する詳細については以下から確認できます。

スタイルリファレンス

Googleマップの色のカスタマイズ、いかがでしたでしょうか？
サイトのオリジナリティをより強調するためにも、ぜひ取り入れていきたいですね。