スタイル化されたマップ

  1. 概要
  2. スタイルの構文
    1. マップの地物
    2. スタイラー
    3. スタイル配列の例
  3. デフォルトのマップスタイルを変更する
  4. StyledMapType を作成する
  5. スタイル化マップ ウィザード

概要

スタイル化されたマップでは、標準の Google 基本マップの表示方法をカスタマイズして、道路、公園、市街地などの要素の視覚表示を変更できます。

マップにスタイルを適用するには、2 つの方法があります。

  • マップの MapOptions オブジェクトの .styles プロパティを設定する。この方法では、標準マップタイプのスタイルを変更します(地形および衛星ビューの基本画像は影響を受けませんが、道路、ラベルなどはスタイル ルールに従います)。詳細については、デフォルトのマップスタイルを変更するをご覧ください。

  • StyledMapType を作成および定義して、マップに適用する。これにより、マップタイプ コントロールから選択可能な新しいマップタイプが作成されます。詳細については、StyledMapType を作成するをご覧ください。

両方の方法は、MapTypeStyle の配列を使用します。配列の各要素は、セレクターとスタイラーで構成されます。セレクターは、スタイルを設定するために選択されるマップ コンポーネントを指定します。一方、スタイラーはこれらの要素の視覚的な変更を指定します。

スタイルの構文

スタイル化されたマップでは、色と変更をマップに適用するために、次の 2 つのコンセプトを使用します。

  • マップの地物は、マップ上でターゲットにされる地理的な要素です。道路、公園、水域など、およびそれらのラベルが含まれます。
  • スタイラーは、マップ地物に適用される色および視覚のプロパティです。表示色が、色相、色、および明度/ガンマ値の組み合わせで定義されます。

マップの地物とスタイラーは、1 つのスタイル配列に結合されます。これがデフォルト マップの MapOptions オブジェクト、または StyledMapType コンストラクタに渡されます。配列の形式は次のとおりです。

var stylesArray = [
  {
    featureType: '',
    elementType: '',
    stylers: [
      {hue: ''},
      {saturation: ''},
      {lightness: ''},
      // etc...
    ]
  },
  {
    featureType: '',
    // etc...
  }
]

各コンポーネントについて、以下に説明します。

マップの地物

マップは、道路や公園などのさまざまな地物によって構成され、これらは MapTypeStyleFeatureType を使用して指定されます。地物のタイプは、all をルートとする木構造で分類されています。マップ上で選択可能なすべての地物の一覧は、 Google Maps JavaScript API リファレンスに記載されています。地物を all として指定すると、すべてのマップ要素が選択されます。

地物は、構文 featureType: 'feature' を使用して指定されます。

次に例を示します。

{
  featureType: "road"
}

地物タイプのカテゴリには、サブカテゴリが含まれているものもあります。これらは、ドット表記で指定します(landscape.naturalroad.local など)。親となる地物、たとえば road を指定する場合、この選択項目に適用されるスタイルは、その子要素にも適用されます。

マップ上の一部の地物は、複数の要素で構成されています。たとえば、道路は線(形状)のグラフィックだけで構成されているのではなく、道路の名前(ラベル)を示すテキストも含まれます。地物の要素は、MapTypeStyleElementType タイプのカテゴリを指定することによって選択できます。次の要素タイプがサポートされています。

  • all(デフォルト): 該当する地物のすべての要素を選択します。
  • geometry: 該当する地物のすべての地理的要素を選択します。
    • geometry.fill: 地物の形状の塗りつぶしのみを選択します。
    • geometry.stroke: 地物の形状のストロークのみを選択します。
  • labels: 該当する地物に関連付けられているテキストのラベルのみを選択します。
    • labels.icon: 地物のラベル内に表示されるアイコンのみを選択します。
    • labels.text: ラベルのテキストのみを選択します。
    • labels.text.fill: ラベルの塗りつぶしのみを選択します。通常、ラベルの塗りつぶしは、ラベルテキストを囲む色付きのアウトラインとしてレンダリングされます。
    • labels.text.stroke: ラベルのテキストのストロークのみを選択します。

次の指定では、すべての地方道路のラベルを選択します。

{
  featureType: "road.local",
  elementType: "labels"
}

スタイラー

スタイラーは、マップの地物に適用される MapTypeStyler タイプのフォーマット指定オプションです。サポートされる MapTypeStyler オプションは次のとおりです。

  • hue(RGB を示す 16 進文字列): 基本色を示します。
  • lightness-100 以上 100 以下の浮動小数値): 要素の明度の変化率です。負の値を指定すると暗くなり(-100 は黒を示す)、正の値を指定すると明るくなります(+100 は白を示す)。
  • saturation-100 以上 100 以下の浮動小数値): 要素に適用する基本色の彩度の変化率です。
  • gamma0.01 以上 10.0 以下の浮動小数値で、1.0 は無補正): 対象の要素に適用するガンマ補正の量です。ガンマは、白と黒には影響を与えずに、色相の明度を非線形的に変更します。通常、ガンマは複数の要素のコントラストを変更する際に使用します。たとえば、要素の縁と内部のコントラストを強めたり弱めたりするためにガンマ補正を行うことができます。ガンマ値が小さい(< 1)とコントラストが強くなり、大きいと(> 1)コントラストが弱くなります。
  • invert_lightnesstrue の場合): 既存の明度を反転します。これは、たとえば暗い地図と白いテキストに素早く切り替える場合に便利です。
  • visibilityonoffsimplified のいずれか): マップ上での要素の表示有無、あるいは表示方法を指定します。visibility が simplified の場合、影響を受ける地物から一部のスタイル機能が削除されます。たとえば、道路はアウトラインがない細い線に簡素化され、公園はラベルテキストが失われラベルアイコンが保持されます。
  • color(RGB を示す 16 進文字列): 地物の色を設定します。
  • weight(ゼロ以上の整数値): 地物の厚みをピクセル単位で設定します。weight を大きな値に設定すると、タイルの境界付近でクリップする場合があります。

地物の色は、color 値単体で設定できます。または、huesaturation および lightness の組み合わせで変更できます。これらのプロパティは、色を表現する 2 つの異なる方法を表していますが、この 2 つの方法を組み合わせることもできます。たとえば、色(color)を設定して、次に彩度(saturation)と明度(lightness)を変更して、ダイアログの表示時にマップをフェードアウトさせることができます。色モデルの詳細については、色相、彩度、明度モデルのドキュメントをご覧ください。

スタイラーの規則は、MapTypeStyler 配列内で記述されている順番に適用されます。複数の処理を組み合わせて単体のスタイラー処理にすることは避けてください。代わりに、スタイラー配列内で各操作を個別のエントリとして定義してください。順番が変わると結果が異なる処理もあるため、順番は重要になります。スタイラー処理によって変更される地物や要素には、(通常は)既存のスタイルが適用されています。既存のスタイルが存在する場合、処理はそのスタイルに対して実行されます。

色相、彩度、明度モデル

スタイル化されたマップでは、スタイラー処理での色の指定に色相、彩度、明度(HSL)モデルが使用されます。これらの色を定義する操作は、グラフィック デザインで一般的なものです。色相は基本色を、彩度はその色の強度を、明度は構成色の中の白や黒の相対的な量を示しています。

hue には HTML 16 進数の色の値を指定しますが、この値は基本色を決めるためだけに使用され、彩度や明度は指定されません。これらは、個別に指定されます。

"#000000"(黒)や "#FFFFFF"(白)、純粋な灰色の色調など、赤、緑、青の 3 つの部分が等しい RGB の hue 値には色相はありません。このような値はいずれも HSL 座標空間での回転方向を示さないためです。黒、白、灰色を表示するには、saturation をすべて取り除いて(値を -100 に設定)、lightness を調整する必要があります。

また、すでにカラースキームが設定されている既存の地物を変更する場合は、hue などの値を変更しても既存の saturationlightness には影響しません。

スタイラーの例

地物を明るい青で表示する場合:

stylers: [
  { hue: "#00d4ff" },
  { saturation: 60 },
  { lightness: -20 },
  { gamma: 1.51 }
]

単一の RGB 値を使用して地物を明るい緑で表示する場合:

stylers: [
  { color: "#99FF33" }
]

地物からすべての色を除去する場合(開始時の色とは無関係):

stylers: [
  { saturation: -100 }
]

地物を完全に非表示にする場合:

stylers: [
  { visibility: "off" }
]

スタイル配列の例

マップ地物セレクターとスタイラー規則は、組み合わされてスタイル配列となります。地物の任意の組み合わせを対象にでき、単体の配列内で指定できます。ただし、同時に適用できるスタイルの数は限定されています。スタイル配列が最大文字数を超過した場合、スタイルは一切適用されません。

次の例では、すべてのマップ地物を灰色にして、幹線道路の形状を青色にし、商業施設のラベルを完全に非表示にしています。

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

デフォルトのマップスタイルを変更する

デフォルトのマップタイプのスタイルを変更するには(ラベルと道路への変更は地形と衛星のマップにも影響します)、マップの MapOptions 内のスタイル配列を、構成時に、または setOptions を呼び出して設定します。

次の例は、すべての地物の彩度を減じて、道路上のラベルを無効にしています。

var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

map.setOptions({styles: styles});

スタイル化可能なマップ要素の詳細については、マップの地物をご覧ください。適用可能な色と効果については、スタイラーをご覧ください。

StyledMapType を作成する

スタイルを適用する新しいマップ タイプを作成できます。これを行うには、StyledMapType を作成して地物とスタイラーの情報をコンストラクタに渡します。この方法は、デフォルトのマップタイプのスタイルに影響しません。

新しいマップタイプを作成するには:

  1. スタイルの配列を作成します。手順については、「マップの地物」と「スタイラー」をご覧ください。
  2. 新しい google.maps.StyledMapType オブジェクトを作成して、スタイルの配列および新しいマップタイプの名前を渡します。
  3. マップ オブジェクトを作成して、マップ オプションで、新しいマップタイプの識別子を mapTypeIds 配列(mapTypeControlOptions オブジェクトのプロパティ)内に含めます。
  4. 前のステップの識別子をスタイル化された新しいマップと関連付けます。
  5. マップが新しいマップ タイプを使用するように設定します。
function initialize() {

  // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
}

下に、生成されるマップを示します。マップタイプ コントロールがマップの左下に表示されています。これは、コード例で作成された新しいマップタイプです。

スタイル化可能なマップ要素の詳細については、マップの地物をご覧ください。適用可能な色と効果については、スタイラーをご覧ください。

スタイル化マップ ウィザード

スタイルを手動で作成して、コードをテストしてどのように表示されるかを確認することは、時間を要する作業となることがあります。スタイル化マップ ウィザードを使用すれば、独自のマップスタイルの JSON をセットアップできます。このウィザードを使用すると、地物とその要素を選択して、これらの地物に処理を適用し、スタイルを JSON に保存できます。この JSON をアプリケーションにコピー アンド ペーストすることができます。

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。