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>