以上で完了です。

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

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

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

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

スタイル化されたマップ

Google Static Maps API を使用して独自のスタイルを適用し、標準の Google マップをカスタマイズしましょう。道路、公園、市街地やその他の有名スポットなどの地物の視覚表示を変更できます。これらの色やスタイルを変更すると、特定のコンテンツを強調したり、ページ上の周囲のコンテンツに合わせたり、地物を完全に非表示にしたりすることも可能です。

次の例は、地方道を明るい緑色に、居住地を黒にスタイル設定した米国ブルックリンの地図を示しています。またラベルの明度を反転させて、暗い背景でより目立つようにしています。この動作を示す例では、URL エンコードを使用しています。

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY

次の例では、スタイル処理と簡素化によって、一般的なアメリカの道路図のような地図を表示しています。

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY

スタイルの構文

スタイル化されたカスタム マップを作成するには、1 つ以上の style パラメータをリクエスト URL に含めます。

それぞれの style 宣言には、次の引数をパイプ文字(|)で区切って含めることができます。

  • feature(オプション): このスタイル変更を適用する地物を指定します。地物は、道路、公園、またはその他の有名スポットなど、マップ上に存在する物です。feature 引数を指定しない場合、指定されたスタイルはすべての地物に適用されます。
  • element(オプション): このスタイル変更を適用する特定の地物の要素を指定します。要素は、形状やラベルなど、地物を特徴づけるものです。element 引数を指定しない場合、スタイルは指定された地物のすべての要素に適用されます。
  • 一連のスタイル規則(必須): 指定された地物と要素に適用されます。API はこの規則を style 宣言で記述した順序で適用します。Google Static Maps API の通常の URL 長制限内であれば、任意の数の規則を含めることができます。

注: style 宣言では、上記の引数をこの順番どおりに指定する必要があります。以下の例は、地物と要素を選択して 2 つの規則を指定する適切な構文です。

style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

機能

次の style 宣言は、マップ上のすべての道路に色を付けます。

style=feature:road|color:0xffffff

以下に、地物の一般的な選択例を示します。

  • feature:all(デフォルト): マップ上のすべての地物を選択します。
  • feature:road: マップ上のすべての道路を選択します。
  • feature:road.local: すべての地方道路を選択します。

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

地物は、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: 水域を選択します。

要素

次の style 宣言は、すべての地方道路のラベルに色を付けます。

style=feature:road.local|element:labels|color:0xffffff

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

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

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

スタイル規則

スタイル規則とは、各 style 宣言で指定された地物や要素に適用される書式オプションです。

次の style 宣言は、2 つのスタイル規則をマップ上の道路に適用します。最初の規則は、色を道路に適用します。2 番目のルールは、道路の表示を簡素化して輪郭がない細い線にしています。

style=feature:road|color:0xffffff|visibility:simplified

それぞれの style 宣言には、パイプ(「|」)文字で区切った 1 つまたは複数の処理を含める必要があります。各処理には、コロン(:)を使用して引数値を指定します。すべての処理は、指定された順序で選択に対して適用されます。

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

  • hue0xRRGGBB 形式で 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 の場合、影響を受ける地物から一部のスタイル機能が削除されます。たとえば、道路はアウトラインがない細い線に簡素化され、公園はラベルテキストが失われラベルアイコンが保持されます。
  • color0xRRGGBB 形式で 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 のサポートページをご覧ください。