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 で表示後、ソースを表示して見てください!

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

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

2017.07.02

Googleマップに色々なマーカーを描画する方法

みなさん、こんにちは!

今回は、 Google マップ上に色々なマーカーを描画する方法を説明したいと思います。

 ・・・

続きを読む

2017.01.19

Distance Matrix API の使い方を考える

みなさん、こんにちは。

 

今回は、Distance Matrix API の使い方について説明いたします。

続きを読む

2016.06.22

山梨県立富士山世界遺産センター公式アプリ「ふじめぐり」

みなさん こんにちは!

本日(6/22)、山梨県立富士山世界遺産センターが開館しました!

今回は富士山世界遺産センターと「・・・

続きを読む

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

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

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

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

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