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

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」を設定すると、標準地図のスタイルが変更されます。

２．標準地図の他にスタイルマップを作成し切り替えられるようにする

//地図の初期化
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);
}

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