BLOG ブログ

ホームページ制作
BLOG
Google Mapの背景色を変えたり、地名を減らしてシンプルにしたりする

Google Mapの背景色を変えたり、地名を減らしてシンプルにしたりする

更新日：2019/08/06

ホームページにGoogleマップを載せたい時は、
Google → マップ → 設定 → 地図を埋め込む
で、埋め込みコードをコピーして貼り付ければできます。

ホームページのテイストに合わせてGoogleマップを少し装飾したいときには、Google Map API を利用します。
以前の記事では、埋め込んだGoogleマップのピンの画像を変更するやり方について書きました。
今回は、Googleマップの見た目自体を装飾するやり方です。

地図のスタイルを変更するというやり方で、Googleマップをカスタマイズできます。
例えば上記のような白黒の地図も設定可能です。
具体的には次のようにしています。


・・・
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', function()
    {
        // BRISK の位置
        var briskLatLng = new google.maps.LatLng(35.68869, 139.814157);

        // オプションの指定
        var mapOptions = {
            zoom: 16,  // 地図の初期表示の拡大率
            center: briskLatLng, // 地図の中心点の座標（緯度・経度）
            mapTypeId: google.maps.MapTypeId.ROADMAP  // MAPタイプの指定
        };
        // MAPオブジェクトの作成
        var mapObj = new google.maps.Map(document.getElementById('brisk-map'), mapOptions);

        // MARKERイメージを作成
        markerImg = new google.maps.MarkerImage(
            "/images/blog/brisk-logo.png",  // アイコン画像のパス
            new google.maps.Size(50, 60),   // アイコン画像の表示させたい範囲（サイズ）
            new google.maps.Point(0, 0),    // アイコン画像の表示させたい範囲の基準点（左上）
            new google.maps.Point(25, 60),  // アイコン画像内のアンカー点の位置
            new google.maps.Size(50, 60)    // アイコン画像の実際の表示サイズ
        );

        // MARKERオブジェクトを作成
        markerObj = new google.maps.Marker({
            position: briskLatLng, // アイコンのアンカー点の緯度・経度
            map: mapObj,           // 上で作成したMAPオブジェクトを指定
            icon: markerImg        // 上で作成したMARKERイメージを指定
        });

        /*** スタイルに関しての設定 start ***/
        // 白黒用スタイル
        var stylez = [
        {
        featureType: "all",
        elementType: "all",
        stylers: [ { saturation: -100 } ] 
        }
        ];
        // スタイルをマップにセット
        var styledMapOptions = {
            map: mapObj,
            name: "brisk-map"
        }
        var styledMapType = new google.maps.StyledMapType(stylez,styledMapOptions);
        mapObj.mapTypes.set('mono', styledMapType);
        mapObj.setMapTypeId('mono');
        /*** スタイルに関しての設定 end ***/
    });
</script>
・・・
<div id="brisk-map" class="brisk-map"></div>

・・・

google.maps.event.addDomListener(window, 'load', function()

{

// BRISK の位置

var briskLatLng = new google.maps.LatLng(35.68869, 139.814157);

// オプションの指定

var mapOptions = {

zoom: 16, // 地図の初期表示の拡大率

center: briskLatLng, // 地図の中心点の座標（緯度・経度）

mapTypeId: google.maps.MapTypeId.ROADMAP // MAPタイプの指定

};

// MAPオブジェクトの作成

var mapObj = new google.maps.Map(document.getElementById('brisk-map'), mapOptions);

// MARKERイメージを作成

markerImg = new google.maps.MarkerImage(

"/images/blog/brisk-logo.png", // アイコン画像のパス

new google.maps.Size(50, 60), // アイコン画像の表示させたい範囲（サイズ）

new google.maps.Point(0, 0), // アイコン画像の表示させたい範囲の基準点（左上）

new google.maps.Point(25, 60), // アイコン画像内のアンカー点の位置

new google.maps.Size(50, 60) // アイコン画像の実際の表示サイズ

);

// MARKERオブジェクトを作成

markerObj = new google.maps.Marker({

position: briskLatLng, // アイコンのアンカー点の緯度・経度

map: mapObj, // 上で作成したMAPオブジェクトを指定

icon: markerImg // 上で作成したMARKERイメージを指定

});

/*** スタイルに関しての設定 start ***/

// 白黒用スタイル

var stylez = [

{

featureType: "all",

elementType: "all",

stylers: [ { saturation: -100 } ]

}

];

// スタイルをマップにセット

var styledMapOptions = {

map: mapObj,

name: "brisk-map"

}

var styledMapType = new google.maps.StyledMapType(stylez,styledMapOptions);

mapObj.mapTypes.set('mono', styledMapType);

mapObj.setMapTypeId('mono');

/*** スタイルに関しての設定 end ***/

});

</script>

・・・

簡単に言うと、Googleマップの見え方を自分好みのスタイルに変更する、
ということをやっています。
上記のコードで「白黒用スタイル」のところでは、
Googleマップ全体の彩度を通常の数値から「-100%」に設定する、ということをやっています。

スタイル変更に関係しているのは、上記のソースのうち、以下の部分です。


・・・
        // 白黒用スタイル
        var stylez = [
        {
        featureType: "all",
        elementType: "all",
        stylers: [ { saturation: -100 } ] 
        }
        ];
・・・

・・・

// 白黒用スタイル

var stylez = [

{

featureType: "all",

elementType: "all",

stylers: [ { saturation: -100 } ]

}

];

・・・

●「featureType: “all”」　は、スタイルを適用する対象です。ここでは「全て」を設定していますが、「道」、「建物」「県境」、など、いろいろと指定できます。詳しくは、公式ドキュメント featureTypeの設定をご覧ください。

●「elementType: “all”」　は、対象の中の要素です。例えば、「建物」の「テキスト」だけ、や「アイコン」だけ、といった指定ができます。詳しくは公式ドキュメント　elementTypeの設定です。

●「stylers: [ { saturation: -100 } ] 」　が、設定したいスタイルです。上記では、「saturation」つまり「彩度」を「-100%」に設定して、白黒を実現しています。項目を中括弧{}　で囲ってカンマで区切って複数指定することもできます。指定できる項目には、「基本色」や「輝度」、「コントラスト」などを設定できます。詳しくはこちら。

これらを応用するといろんなGoogleマップを見せることができます。

色を反転させて夜間モードみたいに。


・・・
        // 夜っぽいマップ
        var stylez = [
        { featureType: "all", elementType: "all", stylers: [ { saturation: 50 }, { invert_lightness: true } ] }
       ,{ featureType: "road.arterial", elementType: "geometry", stylers: [ { color: '#ffee22' } , { saturation: -40 }, { invert_lightness: false }, {lightness: -20 } ]  }
       ,{ featureType: "road.local", elementType: "geometry", stylers: [ { color: '#ddcc11' } , { saturation: -50 }, { invert_lightness: false }, {lightness: -20 } ] }
       ,{ featureType: "road", elementType: "labels.text", stylers: [ { color: '#cccccc' } , { saturation: -50 }, { invert_lightness: false }, {lightness: -20 } ] }
       ,{ featureType: "road", elementType: "labels.text.fill", stylers: [ { color: '#ffaaaa' } , { saturation: -20 }, { invert_lightness: false }, {lightness: -20 } ] }
       ,{ featureType: "road", elementType: "labels.text.stroke",stylers: [ { color: '#111111' } , { saturation: -50 }, { invert_lightness: false }, {lightness: -20 } ] }
        ];
・・・

・・・

// 夜っぽいマップ

var stylez = [

{ featureType: "all", elementType: "all", stylers: [ { saturation: 50 }, { invert_lightness: true } ] }

,{ featureType: "road.arterial", elementType: "geometry", stylers: [ { color: '#ffee22' } , { saturation: -40 }, { invert_lightness: false }, {lightness: -20 } ] }

,{ featureType: "road.local", elementType: "geometry", stylers: [ { color: '#ddcc11' } , { saturation: -50 }, { invert_lightness: false }, {lightness: -20 } ] }

,{ featureType: "road", elementType: "labels.text", stylers: [ { color: '#cccccc' } , { saturation: -50 }, { invert_lightness: false }, {lightness: -20 } ] }

,{ featureType: "road", elementType: "labels.text.fill", stylers: [ { color: '#ffaaaa' } , { saturation: -20 }, { invert_lightness: false }, {lightness: -20 } ] }

,{ featureType: "road", elementType: "labels.text.stroke",stylers: [ { color: '#111111' } , { saturation: -50 }, { invert_lightness: false }, {lightness: -20 } ] }

];

・・・

地名などを少なくしてすっきり見せる。


・・・
        // すっきりマップ
        var stylez = [
        { featureType: "all", elementType: "labels", stylers: [ { visibility: 'off' } ] }
       ,{ featureType: "poi.park", elementType: "labels", stylers: [ { visibility: 'on' } ] }
       ,{ featureType: "transit.station", elementType: "labels", stylers: [ { visibility: 'on' } ] }
       ,{ featureType: "poi.government", elementType: "labels", stylers: [ { visibility: 'on' } ] }
        ];
・・・

・・・

// すっきりマップ

var stylez = [

{ featureType: "all", elementType: "labels", stylers: [ { visibility: 'off' } ] }

,{ featureType: "poi.park", elementType: "labels", stylers: [ { visibility: 'on' } ] }

,{ featureType: "transit.station", elementType: "labels", stylers: [ { visibility: 'on' } ] }

,{ featureType: "poi.government", elementType: "labels", stylers: [ { visibility: 'on' } ] }

];

・・・

ベースの色を指定してサイトに合わせる。


・・・
        // 赤っぽいマップ
        var stylez = [
        { featureType: "all", elementType: "geometry", stylers: [ { hue: '#b31d23'}, { saturation: -30 }, { lightness: -5 } ] }
        ];
・・・

・・・

// 赤っぽいマップ

var stylez = [

{ featureType: "all", elementType: "geometry", stylers: [ { hue: '#b31d23'}, { saturation: -30 }, { lightness: -5 } ] }

];

・・・

・・・などなど。いろいろと試してみるのも面白いかもしれないです。

南本貴之

一覧へ戻る

Google Mapの背景色を変えたり、地名を減らしてシンプルにしたりする

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

Google Mapの背景色を変えたり、地名を減らしてシンプルにしたりする

FOLLOW US 最新の情報をお届けします

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ