[ jQuery ] 埋め込みGoogleマップを装飾する

投稿日:2014年10月20日

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

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



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


・・・
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://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マップの見え方を自分好みのスタイルに変更する、
ということをやっています。
上記のコードで「白黒用スタイル」のところでは、
Googleマップ全体の彩度を通常の数値から「-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: "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 } ] }
        ];
・・・




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

南本貴之

関連記事

カテゴリー: JavaScript, jQuery, WEB, サイト制作
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル