Google Maps JavaScript API v3スタイル付き地図
スタイル付き地図
2012/5/20
Google Maps JavaScript API V3 のマップ タイプ - スタイル付き地図
スタイル付き地図は、地図上の対象物の色や表示有無などを自由カスタマイズすることができます。 例えば、地図の配色トーンをサイトカラーに合わせたものにしたり、地図上の不要な対象物を非表示にしてシンプルに表示するといったことが可能です。
カスタマイズ方法は2つあります。
スタイル地図タイプ
2012/5/20
オプションに指定したカスタムスタイルで地図タイプを作成します。
構文
StyledMapType(styles:Array.<MapTypeStyle>, options?:StyledMapTypeOptions)
StyledMapTypeOptions
以下のオプションを指定可能です。
| プロパティ | 説明 |
|---|---|
| alt |
この地図タイプのボタンが、マウスオーバーされた時に表示するツールチップテキストを指定。 |
| maxZOom | この地図タイプが適用されている時の最大ズームレベルを指定。 |
| minZoom | この地図タイプが適用されている時の最小ズームレベルを指定。 |
| name | 地図タイプコントロールに表示する名前を指定。 |
MapTypeStyleオブジェクト
どの対象物および対象物内の要素にそれぞれどういったスタイルを適用するのかを指定します。
| プロパティ | 説明 |
|---|---|
| elementType | スタイルを適用する要素のタイプを指定。 省略した場合は「all」が適用されます。 |
| featureType | スタイルを適用する機能または機能グループを選択。 省略した場合は「all」が適用されます。 |
| stylers | セレクタに適用するスタイルルールを配列で指定。 配列に指定されている順序で地図要素に適用されます。 |
スタイルルールは、以下のような配列になります。
var stylesArray = [
{
elementType: 'MapTypeStyleElementType',
featureType: 'MapTypeStyleFeatureType',
stylers: [
{gamma: 0.01～10.0},
{hue: '#rrggbb'},
{inverse_lightness: true or false},
{lightness: -100～100},
{saturation: -100～100},
{visibility: 'on' or 'off' or 'simplifed'}
]
},
{
featureType: '',
// etc...
}
]
var latlng=new google.maps.LatLng(35.65861,139.745447);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setOptions({styles: stylesArray});
MapTypeStyleElementType
スタイルを適用する対象物内の要素を選択します。
省略した場合は、allが適用されます。
| 定数 | 説明 |
|---|---|
| all | その対象物のすべての要素を選択。デフォルト。 |
| geometry | その対象物の幾何学要素のみ選択。 |
| labels | その対象物に関連付けられたテキストラベルのみ選択。 |
MapTypeStyleFeatureType
スタイルを適用する地図上の対象物を指定します。
省略した場合は、allが適用されます。
※ドット表記
road.localなどドット表記のものがあります。
この場合、roadが親要素、localが子要素という意味合いになります。
道路全体に適用したい場合は「road」、地方道路や高速道路だけに適用させたい場合は、road.local、road.highwayなどの子要素で個別にルールを指定します。
| 定数 | 説明 |
|---|---|
| administrative | 行政区分 |
| administrative.country | 国 |
| administrative.land_parcel | 土地区画 |
| administrative.locality | 地域 |
| administrative.neighborhood | 近所 |
| administrative.province | 地方 |
| all | 全セレクタタイプ |
| landscape | 景観 |
| landscape.man_made | 人工景観 |
| landscape.natural | 自然景観 |
| poi | 誰かが興味をもった場所 |
| poi.attraction | 観光スポット |
| poi.business | ビジネス |
| poi.government | 行政施設 |
| poi.medical | 緊急サービス（病院、薬局、警察、医者など） |
| poi.park | 公園 |
| poi.place_of_worship | 教会、寺院 |
| poi.school | 学校 |
| poi.sports_complex | スポーツ施設 |
| road | 道路 |
| road.arterial | 幹線道路 |
| road.highway | 高速道路 |
| road.highway.controlled_access | 出入りの管理された高速道路 |
| road.local | 地方道路 |
| transit | 駅 |
| transit.line | 交通機関の路線 |
| transit.station | 駅 |
| transit.station.airport | 空港 |
| transit.station.bus | バス停 |
| transit.station.rail | 鉄道駅 |
| water | 海、湖、池や川など見ずのあるところ |
MapTypeStyler
色相、色、明るさ/ガンマ値の組み合わせて表示色を定義したり、各対象物の表示非表示を指定します。
| プロパティ | 説明 |
|---|---|
| gamma |
地図上の要素のコントラストを指定。 指定可能な値は、0.01（低コントラスト）～10.0（高コントラスト）の数値。 デフォルトは1.0（ガンマ補正なし）。 |
| hue | 基本色を#RRGGBB形式で指定。 |
| inverse_lightness |
要素の明るさを反転するかの有無を指定。 trueを指定すると、色相と彩度を維持しつつ既存の明るさを反転します。 デフォルトはfalse（反転しない）。 |
| lightness |
要素の明度を指定。 指定可能な値は、-100～100の数値。数値が大きいほど明るくなります。 デフォルトは0。 |
| saturation |
要素に適用する基本色の彩度を指定。 指定可能な値は、-100～100。数値が大きいほど鮮やかになります。 デフォルトは0。 |
| visibility |
要素を地図上に表示するかの有無を指定。 指定可能な値は、「on」「off」「simplifed」のいずれか。 |
設置サンプル
選択した対象物の親・子要素にスタイルルールを適用するサンプルです。
設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<!-- スマートフォン向けviewportの指定 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Google Maps APIの読み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
/* スタイル */
var stylesArray = [
{
stylers: [
{hue: '#ff6699'},
{saturation:-20},
{lightness:10}
]
}
];
function initialize() {
/* 東京タワー */
var latlng=new google.maps.LatLng(35.65861,139.745447);
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 14,
/* 地図の中心点 */
center: latlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP
};
/* 地図生成 */
map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
review();
}
function review(){
var ftObj=document.getElementById("ft");
var etObj=document.getElementById("et");
var ft_idx=ftObj.options.selectedIndex;
var et_idx=etObj.options.selectedIndex;
stylesArray[0].featureType=ftObj.options[ft_idx].value;
stylesArray[0].elementType=etObj.options[et_idx].value;
console.log(stylesArray);
map.setOptions({styles: stylesArray});
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
#map_canvas { width:100%; height:100%; }
</style>
</head>
<body>
<form>
<p>以下で対象物およびその対象物内の要素にスタイルを適用します。</p>
<label for="ft">対象物：</label>
<select id="ft" name="ft">
<option value="administrative">administrative</option>
<option value="administrative.country">administrative.country</option>
<option value="administrative.land_parcel">administrative.land_parcel</option>
<option value="administrative.locality">administrative.locality</option>
<option value="administrative.neighborhood">administrative.neighborhood</option>
<option value="administrative.province">administrative.province</option>
<option value="all" selected>all</option>
<option value="landscape">landscape</option>
<option value="landscape.man_made">landscape.man_made</option>
<option value="landscape.natural">landscape.natural</option>
<option value="poi">poi</option>
<option value="poi.attraction">poi.attraction</option>
<option value="poi.business">poi.business</option>
<option value="poi.government">poi.government</option>
<option value="poi.medical">poi.medical</option>
<option value="poi.park">poi.park</option>
<option value="poi.place_of_worship">poi.place_of_worship</option>
<option value="poi.school">poi.school</option>
<option value="poi.sports_complex">poi.sports_complex</option>
<option value="road">road</option>
<option value="road.arterial">road.arterial</option>
<option value="road.highway">road.highway</option>
<option value="road.highway.controlled_access">road.highway.controlled_access</option>
<option value="road.local">road.local</option>
<option value="transit">transit</option>
<option value="transit.line">transit.line</option>
<option value="transit.station">transit.station</option>
<option value="transit.station.airport">transit.station.airport</option>
<option value="transit.station.bus">transit.station.bus</option>
<option value="transit.station.rail">transit.station.rail</option>
<option value="water">water</option>
</select>
<label for="et">対象物内の要素：</label>
<select id="et" name="et">
<option value="all">all</option>
<option value="geometry">geometrys</option>
<option value="labels" selected>labels</option>
</select>
<input type="button" id="btn" name="btn" value="適用" onclick="review()" />
</form>
<div id="map_canvas"><!-- 地図の埋め込み表示 --></div>
</body>
</html>
カスタマイズ方法：デフォルトの地図をスタイリングする
2012/5/20
デフォルトの地図のオプション似スタイルを追加して、地図をスタイリングする例です。
地図オプションオブジェクトのスタイルプロパティを指定することで地図タイプのスタイルを変更できます。 デフォルトの地図タイプのスタイルを変更するには、地図オプションにスタイル配列を指定します。
設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<!-- スマートフォン向けviewportの指定 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Google Maps APIの読み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
/* スカイツリー */
var latlng=new google.maps.LatLng(35.710058,139.810718);
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 18,
/* 地図の中心点 */
center: latlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP
};
/* スタイル配列 */
var stylesArray = [
/* 幾何学要素 */
{
featureType:"all",
elementType:"geometry",
stylers: [
{hue: '#d9acfb'},
{visibility:"on"},
{saturation:0},
{lightness:50}
]
},
/* ラベル */
{
featureType:"all",
elementType:"labels",
stylers: [
{hue: '#d9acfb'},
{visibility:"on"},
{saturation:0},
{lightness:30}
]
},
/* 観光スポット */
{
featureType:"poi.attraction",
elementType:"all",
stylers: [
{hue: '#ff6699'},
{saturation:100},
{lightness:20}
]
}
];
/* 地図生成 */
var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/* オプションでスタイル追加 */
map.setOptions({styles: stylesArray});
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"><!-- 地図の埋め込み表示 --></div>
</body>
</html>
カスタマイズ方法：スタイル地図タイプで生成する
2012/5/20
スタイル地図タイプを作成して、スタイル地図を生成する例です。
以下は地図上の幾何学要素とラベルを紫に、観光スポットをピンクでハイライトしています。
設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<!-- スマートフォン向けviewportの指定 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Google Maps APIの読み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
/* スタイル配列 */
var stylesArray = [
/* 幾何学要素 */
{
featureType:"all",
elementType:"geometry",
stylers: [
{hue: '#d9acfb'},
{visibility:"on"},
{saturation:0},
{lightness:50}
]
},
/* ラベル */
{
featureType:"all",
elementType:"labels",
stylers: [
{hue: '#d9acfb'},
{visibility:"on"},
{saturation:0},
{lightness:30}
]
},
/* 観光スポット */
{
featureType:"poi.attraction",
elementType:"all",
stylers: [
{hue: '#ff6699'},
{saturation:100},
{lightness:20}
]
}
];
function initialize() {
/* 地図タイプID */
var myMaptypeId="skytree";
/* スカイツリー */
var latlng=new google.maps.LatLng(35.710058,139.810718);
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 17,
/* 地図の中心点 */
center: latlng,
/* 地図タイプ */
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, myMaptypeId]
},
mapTypeId:myMaptypeId
};
/* 地図生成 */
var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/* スタイル付き地図 */
var styledMapOptions = {
/* ボタンにマウスオーバーした時のツールチップ */
alt: "ハイライト表示",
/* 最大ズームレベル */
maxZoom: 20,
/* 最小ズームレベル */
minZoom: 17,
/* ボタンに表示する名前 */
name: "スカイツリー"
};
var myMapType = new google.maps.StyledMapType(stylesArray, styledMapOptions);
map.mapTypes.set(myMaptypeId, myMapType);
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"><!-- 地図の埋め込み表示 --></div>
</body>
</html>