API URL
https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY¢er=-33.78094536734332,151.24372711181636&zoom=11&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0xebe3cd&style=element:labels.text.fill%7Ccolor:0x523735&style=element:labels.text.stroke%7Ccolor:0xf5f1e6&style=feature:administrative%7Celement:geometry%7Cvisibility:off&style=feature:administrative%7Celement:geometry.stroke%7Ccolor:0xc9b2a6&style=feature:administrative.land_parcel%7Cvisibility:off&style=feature:administrative.land_parcel%7Celement:geometry.stroke%7Ccolor:0xdcd2be&style=feature:administrative.land_parcel%7Celement:labels.text.fill%7Ccolor:0xae9e90&style=feature:administrative.neighborhood%7Cvisibility:off&style=feature:landscape.natural%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:landscape.natural.landcover%7Celement:geometry%7Cvisibility:off&style=feature:landscape.natural.terrain%7Celement:geometry.fill%7Cweight:1&style=feature:poi%7Cvisibility:off&style=feature:poi%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:poi%7Celement:labels.text%7Cvisibility:off&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x93817c&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0xa5b076&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x447530&style=feature:road%7Celement:geometry%7Ccolor:0xf5f1e6&style=feature:road%7Celement:labels%7Cvisibility:off&style=feature:road%7Celement:labels.icon%7Cvisibility:off&style=feature:road.arterial%7Celement:geometry%7Ccolor:0xfdfcf8&style=feature:road.arterial%7Celement:labels%7Cvisibility:off&style=feature:road.highway%7Csaturation:-100%7Cvisibility:simplified&style=feature:road.highway%7Celement:geometry%7Ccolor:0xf8c967&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0xe9bc62&style=feature:road.highway%7Celement:labels%7Cvisibility:off&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0xe98d58&style=feature:road.highway.controlled_access%7Celement:geometry.stroke%7Ccolor:0xdb8555&style=feature:road.local%7Cvisibility:off&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x806b63&style=feature:transit%7Cvisibility:off&style=feature:transit.line%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:transit.line%7Celement:labels.text.fill%7Ccolor:0x8f7d77&style=feature:transit.line%7Celement:labels.text.stroke%7Ccolor:0xebe3cd&style=feature:transit.station%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:water%7Celement:geometry.fill%7Ccolor:0xb9d3c2&style=feature:water%7Celement:labels.text%7Cvisibility:off&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x92998d&size=480x360
mapstyle.withgoogle
https://mapstyle.withgoogle.com/
上記URLを改行して表示：
https://maps.googleapis.com/maps/api/staticmap
?key=YOUR_API_KEY
¢er=-33.78094536734332,151.24372711181636
&zoom=11&format=png&maptype=roadmap
&style=element:geometry%7Ccolor:0xebe3cd
&style=element:labels.text.fill%7Ccolor:0x523735
&style=element:labels.text.stroke%7Ccolor:0xf5f1e6
&style=feature:administrative%7Celement:geometry%7Cvisibility:off
&style=feature:administrative%7Celement:geometry.stroke%7Ccolor:0xc9b2a6
&style=feature:administrative.land_parcel%7Cvisibility:off
&style=feature:administrative.land_parcel%7Celement:geometry.stroke%7Ccolor:0xdcd2be
&style=feature:administrative.land_parcel%7Celement:labels.text.fill%7Ccolor:0xae9e90
&style=feature:administrative.neighborhood%7Cvisibility:off
&style=feature:landscape.natural%7Celement:geometry%7Ccolor:0xdfd2ae
&style=feature:landscape.natural.landcover%7Celement:geometry%7Cvisibility:off
&style=feature:landscape.natural.terrain%7Celement:geometry.fill%7Cweight:1
&style=feature:poi%7Cvisibility:off
&style=feature:poi%7Celement:geometry%7Ccolor:0xdfd2ae
&style=feature:poi%7Celement:labels.text%7Cvisibility:off
&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x93817c
&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0xa5b076
&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x447530
&style=feature:road%7Celement:geometry%7Ccolor:0xf5f1e6
&style=feature:road%7Celement:labels%7Cvisibility:off
&style=feature:road%7Celement:labels.icon%7Cvisibility:off
&style=feature:road.arterial%7Celement:geometry%7Ccolor:0xfdfcf8
&style=feature:road.arterial%7Celement:labels%7Cvisibility:off
&style=feature:road.highway%7Csaturation:-100%7Cvisibility:simplified
&style=feature:road.highway%7Celement:geometry%7Ccolor:0xf8c967
&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0xe9bc62
&style=feature:road.highway%7Celement:labels%7Cvisibility:off
&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0xe98d58
&style=feature:road.highway.controlled_access%7Celement:geometry.stroke%7Ccolor:0xdb8555
&style=feature:road.local%7Cvisibility:off
&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x806b63
&style=feature:transit%7Cvisibility:off&style=feature:transit.line%7Celement:geometry%7Ccolor:0xdfd2ae
&style=feature:transit.line%7Celement:labels.text.fill%7Ccolor:0x8f7d77
&style=feature:transit.line%7Celement:labels.text.stroke%7Ccolor:0xebe3cd
&style=feature:transit.station%7Celement:geometry%7Ccolor:0xdfd2ae
&style=feature:water%7Celement:geometry.fill%7Ccolor:0xb9d3c2
&style=feature:water%7Celement:labels.text%7Cvisibility:off
&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x92998d&size=480x360
mapstyle.withgoogle
https://mapstyle.withgoogle.com/
Map JSON
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#ebe3cd"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#523735"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#c9b2a6"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#dcd2be"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ae9e90"
}
]
},
{
"featureType": "administrative.neighborhood",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "landscape.natural.landcover",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape.natural.terrain",
"elementType": "geometry.fill",
"stylers": [
{
"weight": 1
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#93817c"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#a5b076"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#447530"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#fdfcf8"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"stylers": [
{
"saturation": -100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#f8c967"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#e9bc62"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#e98d58"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#db8555"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#806b63"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8f7d77"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ebe3cd"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#b9d3c2"
}
]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#92998d"
}
]
}
]
mapstyle.withgoogle
https://mapstyle.withgoogle.com/
STEP2. パーツ毎に変化をつけよう
画面左の Selectors でスタイルを選んだら、画面右の Map Style の「Add」ボタンをクリックします。
そうすると先に設定したスタイルが記録され、別のスタイルを追加できるようになります。
これを繰り返してオリジナルのマップスタイルを作りましょう。
Styled Map Wizard
http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
カスタマイズの例
カスタマイズの例をみてみましょう。
線路を消す
Feature type＞transit
Stylers＞Visibility＞Off
住所表示を消す
Feature type＞Administrative
Stylers＞Visibility＞Off
ランドマークを簡易表示にする
Feature type＞Point of Interest （POI）
Stylers＞Visibility＞Simplified
一通表示を消す
Feature type＞Road
Element type＞Labels＞Icon
Stylers＞Visibility＞Off
高速道路を目立たなくする
Feature type＞Road＞Highway
Saturation＞-50
Lightness＞+50
Styled Map Wizard
http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
[
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{ "hue": "#ffaa00" },
{ "visibility": "simplified" }
]
},{
"featureType": "landscape.man_made" },{
"featureType": "landscape.natural",
"stylers": [
{ "hue": "#ffc300" }
]
},{
"featureType": "landscape.man_made",
"elementType": "labels",
"stylers": [
{ "hue": "#ffbb00" },
{ "saturation": -100 },
{ "lightness": -5 },
{ "visibility": "off" }
]
},{
"featureType": "poi.park",
"stylers": [
{ "hue": "#ffb300" },
{ "lightness": -12 },
{ "visibility": "on" },
{ "saturation": -31 }
]
},{
}
]
Styled Map Wizard
http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
Googleマップのデザインを変えよう
こちらのツールでデザインを変えちゃいましょう( ˘ω˘)☟
Styled Map Wizard ：
http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp
Styled Map Wizardの使い方はLIGで詳しく紹介されている記事がありますので、あわせてご覧ください。
参照ページ：Googleマップのお手軽カスタマイズ！Styled Maps Wizardの使い方
http://liginc.co.jp/web/tool/browser/63680
株式会社LIG
https://liginc.co.jp/web/service/other-service/62242
マップのスタイル設定を開始する
スタイル化されたマップを使用すると、Google のベースマップの表示方法をカスタマイズして、道路、公園、市街地などの要素の視覚表示を変更できます。
ヒント:スタイル設定を使用して、企業や店舗、有名スポット、その他の地物をマップに表示させないようにできます。
スタイル設定でマップの地物を非表示にするサンプルをご覧ください。
例
次の例は、暗所でルート案内を表示する場合などに便利な色を使用して、マップをナイトモードにスタイル設定します。
https://developers.google.com/maps/documentation/javascript/styling?hl=ja
例
次の例は、暗所でルート案内を表示する場合などに便利な色を使用して、マップをナイトモードにスタイル設定します。
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.674, lng: -73.945},
zoom: 12,
styles: [
{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#6b9a76'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#38414e'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#9ca5b3'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#1f2835'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#f3d19c'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#17263c'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
]
});
}
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
https://developers.google.com/maps/documentation/javascript/styling?hl=ja
featureType、elementType および stylers で使用可能な値のリストについては、JSON スタイル リファレンスをご覧ください。
標準マップタイプのスタイル設定または独自のマップタイプの作成
マップにスタイルを適用するには、2 つの方法があります。
マップの MapOptions オブジェクトの .styles プロパティを設定する。
この方法では、標準マップタイプのスタイルを変更します。
地形および衛星ビューの基本画像は影響を受けませんが、道路、ラベル、その他のマップ コンポーネントは、スタイルルールに従います。
デフォルトのマップスタイルを変更する方法をご覧ください。
StyledMapType を作成して、それをマップに適用する。
これにより、ユーザーがマップタイプ コントロールから選択できる新しいマップタイプが作成されます。
スタイル設定されたマップタイプを作成する方法をご覧ください。
どちらの方法でも、MapTypeStyle オブジェクトの配列を使用します。
配列の各要素は、「セレクター」と「スタイラー」で構成されます。下記のスタイルの構文のセクションをご覧ください。
Google Maps APIs Premium Plan のユーザーに対しては、デフォルトのマップスタイルで poi.business カテゴリのマップ地物のラベルがオフになっています。
カスタム スタイルを適用して、これらのラベルをオンにすることができます。
https://developers.google.com/maps/documentation/javascript/styling?hl=ja
スタイルの構文
スタイル設定されたマップでは、色やその他のスタイル変更をマップに適用するために、次の 2つのコンセプトを使用します。
セレクターで、マップ上でスタイル設定が可能な地理的コンポーネントを指定します。
道路、公園、水域など、およびそれらのラベルが含まれます。
セレクターには「地物」と「要素」が含まれ、featureType プロパティおよび elementType プロパティとして指定されます。
スタイラーは、マップの要素に適用できる色と可視性のプロパティです。
表示色は、色相、色、および明度 / ガンマ値の組み合わせで定義されます。
マップにスタイルを設定するには、セレクターとスタイラーをスタイル配列で組み合わせて、
これをデフォルトのマップの MapOptions オブジェクトまたは StyledMapType コンストラクタに渡します。配列の形式は次のとおりです。
var stylesArray = [
{
featureType: '',
elementType: '',
stylers: [
{color: ''},
{visibility: ''},
// Add any stylers you need.
]
},
{
featureType: '',
// Add the stylers you need.
}
]
featureType、elementType および stylers で使用可能な値のリストについては、JSON スタイル リファレンスをご覧ください。
デフォルトのマップスタイルを変更する
デフォルトのマップタイプのスタイルを変更するには、マップの MapOptions 内のスタイル配列を、構成時に、または setOptions を呼び出して設定します。
ラベルおよび道路への変更は、すべてのマップタイプ（地形マップ、衛星マップ、ハイブリッド マップ、およびデフォルトのロードマップ タイプ）に影響します。
このページの初めの例をご覧ください。
featureType、elementType および stylers で使用可能な値のリストについては、JSON スタイル リファレンスをご覧ください。
スタイル設定されたマップを作成する
スタイルを適用する新しいマップ タイプを追加できます。
これを行うには、StyledMapType を作成してセレクターとスタイラーの情報をコンストラクタに渡します。
この方法は、デフォルトのマップタイプのスタイルに影響しません。
次の例では、スタイル設定したマップのコントロールがマップの左上に配置されています。
これは、例で示したコードで作成された新しいマップタイプです。
function initMap() {
// Create a new StyledMapType object, passing it an array of styles,
// and the name to be displayed on the map type control.
var styledMapType = new google.maps.StyledMapType(
[
{elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{color: '#c9b2a6'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#93817c'}]
},
{
featureType: 'poi.park',
elementType: 'geometry.fill',
stylers: [{color: '#a5b076'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#447530'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#f5f1e6'}]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{color: '#fdfcf8'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#f8c967'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#e9bc62'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry',
stylers: [{color: '#e98d58'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{color: '#db8555'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#806b63'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.fill',
stylers: [{color: '#8f7d77'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.stroke',
stylers: [{color: '#ebe3cd'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{color: '#b9d3c2'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#92998d'}]
}
],
{name: 'Styled Map'});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.647, lng: 37.581},
zoom: 11,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
featureType、elementType および stylers で使用可能な値のリストについては、JSON スタイル リファレンスをご覧ください。
https://developers.google.com/maps/documentation/javascript/styling?hl=ja
