SYNCERのロゴ
アイキャッチ画像

Map: styles

stylesは、地図のスタイルを調整するためのオプションです。道や建物などのアイコンを非表示にしたり、色や明るさを変更したりできます。

Array<MapTypeStyle>

スタイルの情報を含むMapTypeStyleオブジェクトを、任意の数だけ配列で指定する。

// MapTypeStyleオブジェクト
var mapTypeStyle1 = {
	featureType: "water",	// 水域の
	elementType: "all",	// 全てを
	stylers: [
		{
			color: "#ff0000" ,	// 赤くする
		} ,
	] ,
} ;

// MapOptionsオブジェクト
var opts = {
	styles: [ mapTypeStyle1, mapTypeStyle2, mapTypeStyle3, ] ,
} ;

デモ

水域が紫色になっています。水域(featureType)の全要素(elementType)に対して、「色を紫色にする」というスタイル(stylers)を適用しました。この、featureType、elementType、stylersのセットを1単位として、配列で任意の数だけ指定できます。

// <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: "water",
			elementType: "all",
			stylers: [
				{
					color: "#592a53" ,
				} ,
			] ,
		} ,
	] ,
} ;

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>

デモページを開く

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2015年9月1日 (火)
コンテンツを公開しました。