以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

スタイル リファレンス

スタイル オプションを使用すると、道路、公園、企業や店舗、その他の有名スポットなどの地物の視覚表示を変更して、標準の Google マップの表現スタイルをカスタマイズできます。こうした地物のスタイル変更に加え、地物を完全に非表示にすることも可能です。これにより、マップの特定のコンポーネントを強調したり、マップをページのスタイルに合わせたりすることができます。

次の JSON スタイル宣言では、すべてのマップ地物を灰色にして、幹線道路の形状を青色にし、風景のラベルを完全に非表示にしています。

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

JSON オブジェクト

JSON スタイル宣言は、次の要素で構成されます。

  • featureType(オプション): スタイルを変更する地物。地物とは、道路、公園、水域など、マップ上の地理的特性のことです。地物を指定しない場合、すべての地物が選択されます。
  • elementType(オプション): 特定の地物のプロパティ。要素とは、ラベルやジオメトリなど、地物のサブパーツのことです。要素を指定しない場合、地物のすべての要素が選択されます。
  • stylers: 選択した地物および要素に適用されるルール。スタイラーは、地物の色、可視性、厚みを表します。1 つまたは複数のスタイラーを地物に適用できます。

スタイルを指定するには、featureType および elementType セレクターのセットと stylers をスタイル配列に統合する必要があります。1 つの配列に含まれる任意の地物の組み合わせを対象にすることができます。ただし、一度に適用できるスタイルの数には制限があります。スタイル配列が最大文字数を超過した場合、スタイルは一切適用されません。

このページの以降の部分では、地物、要素、スタイラーの詳細について説明します。

featureType

次の JSON スニペットは、マップ上のすべての道路を選択します。

{
  "featureType": "road"
}

地物または地物のタイプとは、道路、公園、水域、企業や店舗など、マップ上の地理的特性のことです。

地物は、all をルートとするツリー構造で分類されます。地物を指定しない場合、すべての地物が選択されます。地物を all として指定した場合も、すべての地物が選択されます。

一部の地物には、ドット表記で指定した子地物が含まれます。たとえば、landscape.naturalroad.local です。road などの親地物のみを指定した場合、親地物に指定したスタイルは、road.localroad.highway などのすべての子地物に適用されます。

親地物に含まれる要素は、その子地物すべてに含まれない場合があることに注意してください。

利用できる機能は次のとおりです。

  • 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.local: 地方道を選択します。
  • transit: 交通機関のすべての駅と路線を選択します。
    • transit.line: 交通機関の路線を選択します。
    • transit.station: 交通機関のすべての駅を選択します。
    • transit.station.airport: 空港を選択します。
    • transit.station.bus: バス停留所を選択します。
    • transit.station.rail: 鉄道駅を選択します。
  • water: 水域を選択します。

elementType

次の JSON スニペットは、すべての地方道のラベルを選択します。

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

要素は地物の下位区分です。たとえば道路は、地図上のグラフィカルな線(幾何学図形)と、道路の名称を示すテキスト(ラベル)で構成されます。

次の要素が利用可能ですが、地物によっては、一部またはすべての要素に対応する場合や、すべての要素に非対応の場合があります。

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

stylers

スタイラーは、マップの地物と要素に適用できる表示形式オプションです。

次の JSON スニペットは、RGB 値を使用して地物を明るい緑色で表示します。

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

次のスニペットは、開始色に関係なく、地物の色から完全に彩度を取り除きます。その結果、グレースケールの地物がレンダリングされます。

"stylers": [
  { "saturation": -100 }
]

次のスニペットは、地物を完全に非表示にします。

    "stylers": [
      { "visibility": "off" }
    ]

次のスタイル オプションがサポートされています。

  • hue#RRGGBB 形式で RGB 値を示す 16 進文字列): 基本色を示します。

    注: このオプションは、Google のデフォルト スタイル(またはマップ上で定義したその他のスタイル オプション)で指定されている彩度と明度を維持したまま色相を設定します。設定された色は、ベースマップのスタイルに相関しています。Google がベースマップのスタイルに変更を加えた場合、その変更は、hue でスタイルが設定されたマップの地物に影響を及ぼします。可能であれば、絶対的な color スタイラーを使用することをお勧めします。

  • lightness-100 以上 100 以下の浮動小数値): 要素の明度の変化率です。負の値を指定すると暗くなり(-100 は黒を示す)、正の値を指定すると明るくなります(+100 は白を示す)。

    注: このオプションは、Google のデフォルト スタイル(またはマップ上で定義したその他のスタイル オプション)で指定されている彩度と色相を維持したまま明度を設定します。設定された色は、ベースマップのスタイルに相関しています。Google がベースマップのスタイルに変更を加えた場合、その変更は、lightness でスタイルが設定されたマップの地物に影響を及ぼします。可能であれば、絶対的な color スタイラーを使用することをお勧めします。

  • saturation-100 以上 100 以下の浮動小数値): 要素に適用する基本色の彩度の変化率です。

    注: このオプションは、Google のデフォルト スタイル(またはマップ上で定義したその他のスタイル オプション)で指定されている色相と明度を維持したまま彩度を設定します。設定された色は、ベースマップのスタイルに相関しています。Google がベースマップのスタイルに変更を加えた場合、その変更は、saturation でスタイルが設定されたマップの地物に影響を及ぼします。可能であれば、絶対的な color スタイラーを使用することをお勧めします。

  • gamma0.01 以上 10.0 以下の浮動小数値で、1.0 は無補正): 対象の要素に適用するガンマ補正の量です。ガンマ補正は色の明度を非線形的に変更し、白や黒の値には影響を及ぼしません。通常、ガンマは複数の要素のコントラストを変更する際に使用します。たとえば、要素の縁と内部のコントラストの強弱を調整するためにガンマ補正を行うことができます。

    注: このオプションは、ガンマカーブを使用して、Google のデフォルト スタイルに相関する明度を調整します。Google がベースマップのスタイルに変更を加えた場合、その変更は、gamma でスタイルが設定されたマップの地物に影響を及ぼします。可能であれば、絶対的な color スタイラーを使用することをお勧めします。

  • invert_lightnesstrue の場合)は既存の明度を反転します。これは、たとえば暗い地図と白いテキストに素早く切り替える場合に便利です。

    注: このオプションは単に Google のデフォルト スタイルを反転します。Google がベースマップのスタイルに変更を加えた場合、その変更は、invert_lightness でスタイルが設定されたマップの地物に影響を及ぼします。可能であれば、絶対的な color スタイラーを使用することをお勧めします。

  • visibilityonoffsimplified のいずれか): マップ上での要素の表示有無、あるいは表示方法を指定します。visibility が simplified の場合、影響を受ける地物から一部のスタイル機能が削除されます。たとえば、道路はアウトラインがない細い線に簡素化され、公園はラベルテキストが失われラベルアイコンが保持されます。
  • color#RRGGBB 形式で RGB 値を示す 16 進文字列): 地物の色を設定します。
  • weight(ゼロ以上の整数値): 地物の厚みをピクセル単位で設定します。weight を大きな値に設定すると、タイルの境界付近でクリップする場合があります。

スタイルのルールは、指定した順序で適用されます。複数の処理は、単一のスタイル処理に統合せずに、各処理をスタイル配列の個別のエントリとして定義してください。

注: 順番が変わると結果が異なる処理もあるため、順番は重要になります。スタイル処理によって変更される地物や要素には、(通常は)既存のスタイルが適用されています。既存のスタイルが存在する場合、処理はそのスタイルに対して実行されます。

色相、彩度、明度モデル

スタイル化されたマップでは、スタイラー処理での色の指定に色相、彩度、明度(HSL)モデルが使用されます。色相は基本色を、彩度はその色の強度を、明度は構成色の中の白や黒の相対的な量を示しています。

ガンマ補正は、色空間に対して明度を変更する操作で、通常はコントラストを強めたり弱めたりするために行われます。さらに、HSL モデルは、座標空間内で色を定義しています。hue は色相環内の回転方向を、saturation と lightness はそれぞれ異なる軸の大きさを示します。hue は、ある RGB 色空間(白と黒の色調がないことを除けば、ほとんどの RGB 色空間と同じです)で計測されます。

色相、彩度、明度モデル

hue は HTML の 16 進数で色の値を示しますが、この値は彩度や明度ではなく基本色(色相環の回転方向)を決めるためだけに使用されます。彩度や明度は、変化率という形で別に指定します。

たとえば、純粋な緑色の色相を hue:0x00ff00 または hue:0x000100 として定義できます。両方の色相は同一です。どちらの値も、HSL 色モデルでは純粋な緑色を指します。

RGB 色相環

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

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

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

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