2016.07.24
スタイルマップを使用して地図の雰囲気を変えてみる
みんさん、こんにちは!
いつも見慣れたグーグルマップだけど、利用するためには地図の色が雰囲気に合わない事ってありますよね? 実はグーグルマップは、地図の色合いも目的に合わせて変更し、見やすくカスタマイズすることができます。今回はその変更方法をご紹介します!
以下の例は、地図上のラベルを全て非表示にするものです。方法は2通りあります。
//地図の初期化
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);
}
上記を表示すると、通常「地図/航空写真」と表示されているところが、「地図/ラベルなし」に変更されます。標準地図を残しつつ自分専用のスタイルマップを表示したいときは、2の方法が適していますね。
では具体的に、どのようにスタイルを作成していけば良いのでしょうか?
地図は色々なレイヤで構成されているので、レイヤ毎に色や表示・非表示などを決めていきますが、初めての人には到底わかるものではありません。
そこで下記のサイトを利用し、自分にあったスタイルを作成してみてください。最終的にJSONファイルを作成することができます。
http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html
私が作成したサンプルをいくつか紹介します。
色々と試行錯誤して作成してみましたがいかがですか? 使用したJSONは、Full Screen で表示後、ソースを表示して見てください!
ホームページに表示する地図を個性的なものにしたいときなどは、是非スタイルマップをご活用ください!
地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ
マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。
現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。
位置・空間情報のエキスパート集団として一緒に働きませんか?
マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!
【関連記事】こんな記事も読まれています
2017.12.17
みなさん、こんにちは。
今回は Google Map JavaScript API でマーカーを描画する際に、スタイルを適用したラベルの描・・・
2017.03.05
みなさん、こんにちは。
今回は、Google Maps に KMLファイルをロードしてマーカー、ライン、ポリゴンを表示する方法を紹介します・・・
2017.02.11
Directions API で巡回セールスマン問題を解決する
みなさん、こんにちは。
今回は、Google Maps Directions API で、巡回セールスマン問題を解決する方法を解説します!・・・
-
最新記事New Posts
-
人気記事Popular Posts
-
関連タグRelated Tags
-
アーカイブArchive