MapTypeStyle

2017/06/28

MapTypeStyleは、地図のスタイルを調整する時に、その内容として指定するオブジェクトです。どの地物の(featureType)、どの要素に(elementType)、どんなスタイルを適用するか(stylers)、を指定します。

プロパティ

プロパティ名説明

featureType

プロパティ名	説明
featureType	string 対象となる地物。省略した場合は`"all"`。指定できる値は後述。
elementType	string featureTypeで指定した地物の、細かい分類。省略した場合は`"all"`。指定できる値は後述。
stylers	Array<Object> スタイルの内容を表すオブジェクトを、配列で任意の数だけ指定する。指定必須。各プロパティの処理は競合するため、地物や要素ごとに、オブジェクトを分けて細かく指定するのが望ましい。指定できるプロパティは後述。

string

対象となる地物。省略した場合は"all"。指定できる値は後述。

elementType

string

featureTypeで指定した地物の、細かい分類。省略した場合は"all"。指定できる値は後述。

stylers

Array<Object>

スタイルの内容を表すオブジェクトを、配列で任意の数だけ指定する。指定必須。各プロパティの処理は競合するため、地物や要素ごとに、オブジェクトを分けて細かく指定するのが望ましい。指定できるプロパティは後述。

featureType

featureTypeに指定できる値の一覧です。

"all": 初期値。全ての地物。
"administrative": 全ての行政区画。
"administrative.country": 国。
"administrative.land_parcel": 区画。
"administrative.locality": 地区、市区。
"administrative.neighborhood": 周辺地域。
"administrative.province": 州、県。
"landscape": 全ての風景。
"landscape.man_made": 人造物。
"landscape.natural": 自然物。
"landscape.natural.landcover": 土地被覆物。
"landscape.natural.terrain": 自然地形。
"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.highway.local": 地方道。
"transit": 全ての交通機関。
"transit.line": 路線。
"transit.station": 全ての駅。
"transit.station.airport": 空港。
"transit.station.bus": バス停留所。
"transit.station.rail": 鉄道駅。
"water": 水域。

elementType

elementTypeに指定できる値の一覧です。

"all": 初期値。全ての要素。
"geometry": 形状。
"geometry.fill": 形状の塗りつぶし。
"geometry.stroke": 形状の線。
"labels": ラベル。
"labels.icon": ラベルのアイコン。
"labels.text": ラベルのテキスト。
"labels.text.fill": ラベルのテキストの塗りつぶし。
"labels.text.stroke": ラベルのテキストの線。

stylers

stylersに指定できるプロパティの一覧です。

hue: 基本色。RGB値を示す16進数の文字列で指定する。カラーネームや省略形(例: #fff)での指定は無効なので注意。
lightness: 明度の変化率。-100〜100の数値で指定する。
saturation: 彩度の変化率。-100〜100の数値で指定する。
gamma: ガンマ補正の量。0.01〜10.0の数値で指定する。
invert_lightness: 明度の反転。真偽値で指定する。trueの場合に反転する。
visibility: 表示状態。文字列で指定する。"on"なら表示、"off"なら非表示、"simplified"なら単純化して表示。
color: 地物の色。RGB値を示す16進数の文字列で指定する。カラーネームや省略形(例: #fff)での指定は無効なので注意。
weight: 地物の厚み。ピクセル単位の整数値で指定する。

デモ

プロパティ名をクリックすると、そのプロパティの指定を省略できます。プロパティ同士は競合します。上手く反映されない場合は、他のプロパティを省略するようにしてみましょう。

// <div id="map-canvas"></div>
var mapDiv = document.getElementById( "map-canvas" ) ;

var opts = {
	center: new google.maps.LatLng( 35.71, 139.8107 ) ,
	zoom: 13 ,
	styles: [
		{
			featureType: "all",
			elementType: "all",
			stylers: [
				{
					hue: "#000" ,
					lightness: 50 ,
					saturation: 0 ,
					gamma: 0.5 ,
					invert_lightness: false ,
					color: "#592a53" ,
					weight: 8 ,
					visibility: "on" ,
				} ,
			] ,
		} ,
	] ,
} ;

var map = new google.maps.Map( mapDiv, opts ) ;

サンプルコード

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

var opts = {
	center: new google.maps.LatLng( 35.71, 139.8107 ) ,
	zoom: 13 ,
	styles: [
		{
			featureType: "water",
			elementType: "all",
			stylers: [
				{
					color: "#592a53" ,
				} ,
			] ,
		} ,
	] ,
} ;

var map = new google.maps.Map( mapDiv, opts ) ;
	</script>
</body>
</html>

デモページを開く

参考

Google Maps JavaScript API: MapTypeStyle: Googleの公式リファレンス。