地図などを表示するページを作る際に、GoogleMapを読み込むといった事はよくやると思います。
サイトの雰囲気と違っていても、「仕方がない・・・」と妥協した、といった経験も少なからずあるはず。
実はGoogleMapはスタイル(装飾)を定義する事ができるのでデモとして、
今回はデフォルトの色合いを変更して、灰色をベースにしたシックな感じのマップを作ってみました。
まずは、完成形のデモをご覧ください。
では、今回用意したデモの内容で説明をいたします。
まずは全体のJSのソースが下記となります。
それでは、順を追ってみてみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<script> var map; function initialize() { var latlng = new google.maps.LatLng(35.65858,139.745433); //① var mapOptions = { zoom: 17, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions); //③ var markerImg = new google.maps.MarkerImage( "markerIcon.png", new google.maps.Size(137, 53), new google.maps.Point(0, 0) ); var marker = new google.maps.Marker({ position: latlng, map: map, icon: markerImg, }); //② var styleOptions = [ { featureType: 'all', stylers: [ {saturation: -150}, {gamma: 0.80} ] }, { featureType: 'road.arterial', elementType: 'geometry', stylers: [{hue:"#ededed"},{ saturation: 20 },{gamma:1},{lightness:110}] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{ saturation: -30 },{lightness:30},{hue:"#0f0f0f"}] }, { featureType:'poi.school', elementType:'all', stylers:[{visibility: 'off' }] }, { featureType:'poi.business', elementType:'all', stylers:[{visibility: 'off' }] } ]; map.setOptions({styles: styleOptions}); } google.maps.event.addDomListener(window,'load',initialize); </script> |
1 2 3 |
<div id="mapCanvas"> //ここに地図が表示される </div> |
1 2 3 4 |
#mapCanvas { width:100%; height:500px; } |
GoogleMapAPIの基本設定
1 |
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> |
上のソース以外にも上記のGoogleMapAPIのJSを読み込みが必要となります。
このソースをまずは、HTMLのhead部に読み込んで下さい。
それではまず、①ではGooleMapの初期設定を行っています。その箇所をクローズアップすると以下の通りになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var map;//GoogleMapが格納される変数を定義 function initialize() { var latlng = new google.maps.LatLng(35.65858,139.745433);//緯度経度情報を定義 (緯度・経度の順で)① //↓②マップの初期設定値を記述 var mapOptions = { zoom: 17,//初期のマップの倍率 1-18までで指定 数字が大きくなるとズームアップ center: latlng,//地図の中心の指定 mapTypeId: google.maps.MapTypeId.ROADMAP //マップタイプ こちらがデフォルト } //③ map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions); /************** ** 中略 ** **************/ } google.maps.event.addDomListener(window,'load',initialize); |
実は上記だけでもgoogleMapは生成されます。
①で地球のどこの場所を出すかの座標を指定しています。
こちらは緯度経度となりますので、緯度経度で入力する必要があります。
緯度経度情報に関しては、小数点で書きますが小数点以下の桁が多いほど精度が高くなります。
ちなみに今回指定してる場所は、東京タワー派なので東京タワーを指定しています。
②でマップの初期設定値を設定します。今回は最小設定となりますが、zoom値とcenterは必ず指定しましょう。
今回は最初に決めた場所を地図の中心としました。
③これでGoogleMapが#mapCanvasに格納されて表示される。
スタイルの設定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var styleOptions = [ { featureType: 'all',//すべての対象に対して stylers: [{saturation: -150},{gamma: 0.80}] }, { featureType: 'road.arterial',//幹線道路を指定 elementType: 'geometry',//幹線道路全体を指定 stylers: [{hue:"#ededed"},{ saturation: 20 },{gamma:1},{lightness:110}] }, { featureType: 'road.highway',//高速道路を指定 elementType: 'geometry',//高速道路全体を指定 stylers: [{ saturation: -30 },{lightness:30},{hue:"#0f0f0f"}] }, { featureType:'poi.school',//学校関連 elementType:'all',//学校関連の全てを stylers:[{visibility: 'off' }]//非表示設定 }, { featureType:'poi.business',//ビジネスに関連するものを指定 elementType:'all',//ビジネスに関連するすべて stylers:[{visibility: 'off' }]//非表示設定 } ]; map.setOptions({styles: styleOptions}); |
今回のデモにあるスタイルの記述の全貌が上記となります。
項目がちょっと呪文見たいになっているので、ひとつ抜き出してみると
1 2 3 4 5 |
{ featureType: 'road.arterial', elementType: 'geometry', stylers: [{hue:"#ededed"},{ saturation: 20 },{gamma:1},{lightness:110}] } |
上記のようになります。
{}で囲んだところに、
featureTypeが対象物(何に対して)となり
elementTypeの箇所が要素(何を)となります。
stylersの箇所に色合いを指定します。
Stylersに関しては、hue(基本色)、saturation(彩度)、lightness(明度)、gamma(ガンマ値)が指定できます。
基本色、彩度、明度の3つのものを単一で指定するためにcolorを使う事も可能です。
さて、上の例でいうと、対象物を指定するfeatureTypeは”road.arterial”が指定しています。
’road.arterial’とは、「幹線道路」を指す名称となります。
地図上のすべてに変更を加える場合は’allと’なります。
次にelementTypeに関しては’geometry’となっております。
elementTypeに関しては、プロパティが文字色やその物体を囲む線の色など細かく指定する事ができます。
CSSで例えると、colorとか、font-weightや、border-colorといったプロパティにあたります。
そして、「geometry」の意味は「その対象物」自体にという意味になるようです。
上のソースに置き換えると、「幹線道路(全体)に」となります。
さて、最後のstyletsに関しては、色合いの指定となります。
また、stylersには色合いだけではなくて、その要素を表示/非表示といったプロパティも存在します。
それが、visibilityというプロパティです。
”visibility”のプロパティの値を’off’’にすると「幹線道路につくラベル」を消す事ができます。
1 2 3 4 5 |
{ featureType:'road.arterial', elementType:'all', stylers:[{visibility: 'off' }] } |
elementTypeとfeatureTypeに関しては、設置できる値に関しては下にまとめてるので参考にしてください。
オリジナルマーカーを設置する。
折角、色合いも変更できるようになったので、折角なのでマーカーも変更してみようと思います。
1 2 3 4 5 6 7 8 9 10 |
var markerImg = new google.maps.MarkerImage( "markerIcon.png", //アイコンとして使う画像パスの指定 #1 new google.maps.Size(137, 53), //アイコンの画像サイズ#2 new google.maps.Point(0, 0)//アイコンの位置 ); var marker = new google.maps.Marker({ position: latlng, //アイコンを表示する場所この場合は地図の中心 map: map, //アイコンを出す地図要素 icon: markerImg, //設定内容 }); |
このコードそのまま利用する場合、#1と#2は、環境によって変更する必要があります。
完成デモとりあえず、GoogleMapがちょっとかっこよくなりました!!
指定できる値などは下にまとめてますので、色々と試してみてください。
1点注意点として、スタイルをたくさん設定しすぎると、動作が重くなるのでそこだけ気をつけて下さい。
設定できる項目一覧上記で、設定の仕方や意味をお伝えしましたが、設定できる要素をまとめました。
指定の仕方、
例:一般道路に赤色の色を指定する場合
1 2 3 4 5 |
{ featureType:'road.local', elementType:'all', stylers:[{color: '#ff0004' }] } |
種類 | 説明 | 記述文 | 区分 |
---|---|---|---|
行政領域 | 国境・県境などの線や図形、国名・市町村名など | administrative.country | 国 |
administrative.land_parcel | 区画 | ||
administrative.locality | 地区・市区 | ||
administrative.neighborhood | 周辺地域 | ||
administrative.province | 州・県 | ||
風景 | 建物・山などの線や図形、建物・島・山・川・峠・湖など | landscape.man_made | 人造物 |
landscape.natural | 自然物 | ||
ランドマーク | 学校・病院・駅・公園・工場・遊園地・商業施設・ビルなど | poi.attraction | 観光地 |
poi.business | ビジネス | ||
poi.goverment | 政府機関 | ||
poi.medical | 緊急サービス | ||
poi.park | 公園 | ||
poi.place_of_worship | 宗教関連施設 | ||
poi.school | 学校 | ||
poi.sports_complex | スポーツ施設 | ||
道路 | 高速道路・国道・県道・市道などの線や図形、それらの名称や国道標識・県道標識・信号機アイコンを含みます。 | road.arterial | 幹線道路 |
road.highway | 高速道路 | ||
road.local | 地方道 | ||
交通機関 | 線路・航路・空路・空港などの線や図形、線路名・駅名・空港名や駅・バス停留所アイコンを含みます。 | transit.line | 路線 |
transit.station | 駅 | ||
transit.station.airport | 空港 | ||
transit.station.bus | バス停 | ||
transit.station.rail | 鉄道駅 | ||
水域 | 海・川・湖・プールなど水のある場所の線や図形、海・洋・湾の名称を含みます。 | water | 水域 |
記述文 | 対象 |
all(デフォルト) | その対象物のすべての要素を選択。 |
geometry | その対象物のすべての幾何学要素を選択 |
geometry.fill | 対象物の塗りつぶしのみ |
geometry.stroke | 対象物のストロークのみ |
labels | その対象物に関連付けられたテキスト ラベル |
labels.icon | 対象物のラベル内に表示されるアイコン |
labels.text | ラベルのテキスト |
labels.text.fill | ラベルの塗りつぶし |
labels.text.stroke | ラベルのテキストのストローク |