Staff Blog

2016.07.24

スタイルマップを使用して地図の雰囲気を変えてみる

みんさん、こんにちは！

いつも見慣れたグーグルマップだけど、利用するためには地図の色が雰囲気に合わない事ってありますよね？　実はグーグルマップは、地図の色合いも目的に合わせて変更し、見やすくカスタマイズすることができます。今回はその変更方法をご紹介します！

以下の例は、地図上のラベルを全て非表示にするものです。方法は２通りあります。

//地図の初期化
function initMap() {
  // 地図生成
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 35.7, lng: 139.7}, 
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [
      {
        "elementType": "labels",
        "stylers": [
          { "visibility": "off" }
        ]
      }
    ]
  });
}

Mapオブジェクトを作成するときのオプションに「styles」を設定すると、標準地図のスタイルが変更されます。

Full Screen

//地図の初期化
function initMap() {
  // スタイルの設定
  var myMapType = new google.maps.StyledMapType([
    {
      "elementType": "labels",
      "stylers": [
        { "visibility": "off" }
      ]
    }],
    {
      name: 'ラベルなし'
  });
  var myMapTypeId = 'my_style';

  // 地図生成
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 35.7, lng: 139.7}, 
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, myMapTypeId] 
    }
  });
  // 地図にスタイルを追加
  map.mapTypes.set(myMapTypeId, myMapType);
  map.setMapTypeId(myMapTypeId);
}

上記を表示すると、通常「地図/航空写真」と表示されているところが、「地図/ラベルなし」に変更されます。標準地図を残しつつ自分専用のスタイルマップを表示したいときは、２の方法が適していますね。

Full Screen

では具体的に、どのようにスタイルを作成していけば良いのでしょうか？

地図は色々なレイヤで構成されているので、レイヤ毎に色や表示・非表示などを決めていきますが、初めての人には到底わかるものではありません。

そこで下記のサイトを利用し、自分にあったスタイルを作成してみてください。最終的にJSONファイルを作成することができます。

http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html

私が作成したサンプルをいくつか紹介します。

Full Screen

Full Screen

色々と試行錯誤して作成してみましたがいかがですか？　使用したJSONは、Full Screen で表示後、ソースを表示して見てください！

ホームページに表示する地図を個性的なものにしたいときなどは、是非スタイルマップをご活用ください！