【Maps JavaScript API】マップのスタイルを変えてみよう

前回は「4つの基本マップタイプ」の解説、そして、ボタンでマップタイプを切り替えるサンプルを作成しました。
今回は、Googleマップに様々なスタイルを設定する方法の解説をしたいと思います。

今までGoogleマップをご自身のサイトに埋め込む際、「ウェブサイトはモノクロのシンプルな色味なのに、Googleマップだけカラフルになってしまい、サイトのデザインに統一性が無くなってしまう...」と思われたことはありませんか。
いつも見慣れているGoogleマップにスタイルを設定することで、道路の色、海や皮の色、市街地の色、公園の色など、マップ色を変えたり、ラベル（市街地の場所の名前など）を非表示にしたり、視覚表示を変更することができます。
ご自身のサイトがモノクロであれば、モノクロのGoogleマップを作成することが可能になります。

スタイルの作成自体は、生成ツールを利用して簡単に作ることが可能です。
マップのスタイル生成ツールは、以下サイトを利用してみましょう。
Google Maps APIs Styling Wizard
上記サイトは、スタイルを設定するためのオブジェクトをJSON形式で生成してくれます。
また、明るい色から暗い色まで地図のベースとなるカラーが9色用意されているので、非常に使いやすいです。

まずは、Google Maps APIs Styling Wizardでスタイル設定オブジェクトを作成していきましょう。

地図のスタイル設定オブジェクトを生成する

Google Maps APIs Styling Wizardのトップページに入りましょう。

Customize colors, roads, labels, and more.
Then use your custom style in your Google Maps APIs project.
色、道路、ラベルなどをカスタマイズします。
次に、Google Maps APIプロジェクトでカスタムスタイルを使用します。

【CREATE A STYLE】を選択してください。

※画面説明のためGoogle Maps APIs Styling Wizardからスクリーンショット画像を作成しました。　
Googleマップの地図部分には地図の權利上、モザイクをかけています。

次に【Select theme】からベースとなる地図を選択してください。
地図の種類は全部で6種類あります。

ベースの地図を選択したら、【Adjust density of featues】のそれぞれのスライダーの値を変更してみましょう。
スタイル設定を使用して、企業や店舗、有名スポット、その他の地物をマップに表示させないようにすることが可能です。
スライダーの位置を左に移動してみましょう。
左に移動することで、それぞれの項目の色が薄くなることが確認できます。

※画面説明のためGoogle Maps APIs Styling Wizardからスクリーンショット画像を作成しました。　
Googleマップの地図部分には地図の權利上、モザイクをかけています。

地図のスタイルが決定したら、【FINISH】を選択してください。
【Export Style】の画面に、JSONとURL形式でコピーできるソースが生成されます。
このJSONのソースをコピーして、自分のソースに貼り付けることで、地図のスタイルを変更することが可能となります。

※画面説明のためGoogle Maps APIs Styling Wizardからスクリーンショット画像を作成しました。　
Googleマップの地図部分には地図の權利上、モザイクをかけています。

地図にスタイルを設定する

先ほどコピーしたJSONのソースを使って地図にスタイルを設定します。
まずは、取得したAPIキーを使って地図を表示するを参考に、ベースとなる地図を作成しましょう。
次にコピーしたJSONのソースを使ってStyledMapType を作成し、それをマップに適用します。
以下、jsのサンプルコードを参考に、好きなスタイルの地図を作成してみましょう。
地図のスタイルを設定した後、必ずスタイル付きマップをMapTypeIdに関連付けて、表示するように設定することを忘れないようにしましょう。

<script>
    var map;
    function initMap() {
      //地図のスタイルを設定
      var styledMapType = new google.maps.StyledMapType(
        [{
          "elementType": "geometry",
          "stylers": [{
            "color": "#242f3e"
          }]
        }, {
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#746855"
          }]
        }, {
          "elementType": "labels.text.stroke",
          "stylers": [{
            "color": "#242f3e"
          }]
        }, {
          "featureType": "administrative.locality",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#d59563"
          }]
        }, {
          "featureType": "poi",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#d59563"
          }]
        }, {
          "featureType": "poi.park",
          "elementType": "geometry",
          "stylers": [{
            "color": "#263c3f"
          }]
        }, {
          "featureType": "poi.park",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#6b9a76"
          }]
        }, {
          "featureType": "road",
          "elementType": "geometry",
          "stylers": [{
            "color": "#38414e"
          }]
        }, {
          "featureType": "road",
          "elementType": "geometry.stroke",
          "stylers": [{
            "color": "#212a37"
          }]
        }, {
          "featureType": "road",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#9ca5b3"
          }]
        }, {
          "featureType": "road.highway",
          "elementType": "geometry",
          "stylers": [{
            "color": "#746855"
          }]
        }, {
          "featureType": "road.highway",
          "elementType": "geometry.stroke",
          "stylers": [{
            "color": "#1f2835"
          }]
        }, {
          "featureType": "road.highway",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#f3d19c"
          }]
        }, {
          "featureType": "transit",
          "elementType": "geometry",
          "stylers": [{
            "color": "#2f3948"
          }]
        }, {
          "featureType": "transit.station",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#d59563"
          }]
        }, {
          "featureType": "water",
          "elementType": "geometry",
          "stylers": [{
            "color": "#17263c"
          }]
        }, {
          "featureType": "water",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#515c6d"
          }]
        }, {
          "featureType": "water",
          "elementType": "labels.text.stroke",
          "stylers": [{
            "color": "#17263c"
          }]
        }], {
          name: 'Styled Map'
        });
      //インスタンスを作成
      map = new google.maps.Map(document.getElementById('map'), {
        //地図のオプション
        center: {
          lat: 35.681167,
          lng: 139.767052
        },
        zoom: 8
      });
      //スタイル付きマップをMapTypeIdに関連付けて、表示するように設定
      map.mapTypes.set('styled_map', styledMapType);
      map.setMapTypeId('styled_map');
    }
    google.maps.event.addDomListener(window, 'load', initMap);
 </script>

◆マップにスタイルを設定するサンプル
マップのスタイルを変えることで、地図を自由にデザインすることができるようになります。
今回のモデページでは、Nightタイプのスタイルを地図に設定してみました。
是非参考にしてみてください。

デモページはこちら

ご質問などございましたら、お気軽に下記コメント欄にお寄せください。

※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。

Maps Flow!

このブログを検索