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

Full Screen

 

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の方法が適していますね。

Full Screen

 

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

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

 

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

 

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

 

 

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

Full Screen

Full Screen

 

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

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

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

2016.08.23

Google Maps でロングタップのイベントを発生させるには

みなさん、こんにちは!

今回は Google Maps 上でスマホやiPadなどのタブレットでロングタップに対応する方法をご紹介します。

続きを読む

2017.06.24

ジオメトリライブラリを使って距離や面積を算出する

みなさん、こんにちは。
Google Maps JavaScript API を使用して2点間の距離やエリアの面積を計算する方法をご存知ですか・・・

続きを読む

2017.03.17

時差計算ができるGoogle Maps Time Zone API の利用方法を・・・

みなさん、こんにちは。

 

Google Maps API で最後まで紹介できていなかった「続きを読む

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

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

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

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