MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2016.07.24

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

20160723

みんさん、こんにちは!

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

 

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

 

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

スタイルマップ1

 

 

2.標準地図の他にスタイルマップを作成し切り替えられるようにする
//地図の初期化
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);
}

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

スタイルマップ2

 

 

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

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

 

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

 

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

 

 

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

スタイルマップ3

 

 

スタイルマップ4

 

 

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

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

【関連記事】こんな記事も読まれています

2017.10.28

GoogleマップにFusion Tablesを使ってマーカーを7万個描画する

みなさん、こんにちは。

今回は、Google  Fusion Tables にデータを登録し、Google Maps JavaScript A・・・

続きを読む

2017.03.22

Google マップで「竹島」と表示する方法は?

みなさん、こんにちは。

Google Maps JavaScript API は、みなさんご存知のとおり多言語に対応した地図です。そのため、l・・・

続きを読む

2017.05.26

日光いろは坂で「Roads API」を使ってみたら・・・

みなさん、こんにちは。

先日開催した「Google Maps 活用セミナー」には、多数のご来場ありがとうございました。

 ・・・

続きを読む

 - Google Maps APIs, Google Maps JavaScript API, スタイルマップ, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)