マップ スタイル エディタのチュートリアル

プラットフォームを選択: Android iOS JavaScript ウェブサービス

Google Cloud コンソールのマップ スタイル エディタの使い方について学びます。

地図のスタイルのカスタマイズは、業種別に最適化された地図や Google 基本地図のデフォルト スタイルの更新など、Google が地図のスタイルに加える更新より常に優先されます。

エディタのホーム画面である [Map Styles] ページには、作成済みのスタイルの一覧が表示され、未公開の下書きの有無も確認できます。新しいスタイルの作成もこのページから可能です。

各地図スタイルのページ

[Map Styles] ホーム画面の一覧でスタイルをクリックすると、そのスタイルの個別ページが開き、名称、説明、画像が表示されます。このページでは、スタイルをカスタマイズ、名前変更、複製、削除したり、マップ ID と特定のスタイルを関連付けたりできます。1 つのスタイルに複数のマップ ID を関連付ける(例: Android アプリ、iOS アプリ、ウェブアプリのそれぞれで異なる ID を、同一のスタイルに関連付ける)ことは可能ですが、同じマップ ID を複数のスタイルと関連付けることはできません。

スタイルのコントロール

スタイルをカスタマイズする場合、メインのスタイル機能はウィンドウの最上部、右側に表示されます。各コントロールは、最初の時点でコントロールを使用できない場合は明るい灰色で表示され、使用可能な場合は濃い青色で表示されます。

マップ スタイラーのスタイルのカスタマイズに、[元に戻す]、[やり直し]、[保存]、[公開] の 4 つのコントロールが表示されている詳細なスクリーンショット。このスクリーンショットでは、[元に戻す] と [保存] はテキストの色が濃く使用可能ですが、[やり直し] と [公開] はテキストが薄い灰色で使用できません。

[元に戻す] コントロールは、最初に変更を行うと使用可能になります。[やり直し] コントロールは、特定のスタイル編集セッションで最初のアクションを取り消すと使用可能になります。どちらのコントロールも、スタイルが明示的に保存されるまで、または Cloud コンソール セッションが終了するまで使用可能です。

[公開] コントロールは、明示的に保存を行い、保存済みの下書きバージョンができた時点で使用可能になります。

スタイルのバージョン履歴

スタイルに変更を加えて保存すると、その変更内容は保存済みのバージョンとして閲覧、復元、複製が可能になります。スタイルに含まれるバージョンの参照や操作は、[Version History] ペインで行います。

Google Cloud コンソールの地図スタイル画面で [Version History] ペインを開いた様子のスクリーンショット。[Version History] ペインにはいくつかの下書きバージョンと公開済みバージョンが一覧表示されており、ペイン下部には各バージョンを復元する [Restore] ボタンと複製する [Duplicate] ボタンがある。また、ペインの枠外に [Save] ボタンと [Publish] ボタンが表示されている。

各スタイルのすべてのバージョンを表示する手順:

  1. [地図のスタイル](Map Styles)ページに移動します。
  2. 既存のスタイルを選択します。
  3. [Customize Style] を選択します。
  4. [Settings] > [Version History] の順に選択します。

スタイルに加えた変更を保存または公開するボタンは画面右上に表示されていますが、[Version History] ペインが開いている間は操作できません。[Version History] ペインの下部には、選択したバージョンを復元する [Restore] ボタンと、複製する [Duplicate] ボタンがあります。

スタイルの保存方法は複数あり、それぞれ異なる種類のバージョンとして、分けて表示されます。

  • 下書き(Drafts)
    • スタイルに変更を加えた後、明示的に保存していない場合、Unsaved Changes(未保存の変更)というバージョンが作成されます。
      これらのバージョンは復元も複製もできず、ブラウザのタブを閉じるか Cloud コンソールのセッションが終了した時点で失われます。
    • [保存] を選択すると、日時付きの下書きバージョンが作成されます。保存した下書きは、明示的に公開するまではアプリから利用できません。
  • 公開済みのバージョン(Published versions)
    • 地図スタイルを作成(新規作成、既存スタイルを複製、または JSON スタイルをインポート)すると、そのスタイルは自動的に公開されます。
    • [Publish](公開)を選択すると、日時付きの公開済みバージョンが作成されます。公開済みのバージョンはアプリから利用可能です。バージョンを公開するたびに、対応するマップ ID を持つすべてのアプリにそのバージョンが反映されます。

過去のバージョンはすべて自由に参照できますが、変更を加えることはできません。保存または公開済みのバージョンに変更を加えて再利用したい場合は、[復元] でそのバージョンの内容を該当スタイルの現行バージョンにするか、[複製] でそのバージョンと同内容の別個のスタイルを作成します。

バージョンの復元を行った時点で未保存の変更があった場合、未保存だった変更内容は日時付きの下書きバージョンとして自動保存されます。

対象物と要素

左端の編集ペインで対象物のタイプを選択すると、[要素のタイプ] ペインが開き、その対象物を編集するオプションが表示されます。編集可能なほとんどの対象物の要素は、ジオメトリ(色と枠線)とラベル(テキストとアイコン)です。

[要素のタイプ] ペインでいずれかのオプションを選択すると、[スタイラー] ペインが開き、その要素の編集オプションが表示されます。

マップ スタイル エディタにある 3 つの要素のエディタペインのスクリーンショット。高速道路の対象物タイプとストロークの要素タイプが選択されています。[すべてのズームでカスタマイズ] チェックボックスがオンになっており、カスタマイズされた 2 つのズームレベルを示す 2 つの青い点がズーム スライダーに表示されています。

特定の対象物のスタイルを削除するには、各要素の [スタイラー] ペインのすべてのチェックボックスをオフにします。

ズームレベル

[Stylers] ペインでは、ズームレベルに応じたスタイルの変化を適用することができます。ズームレベルに応じた要素スタイル適用の例もご覧ください。

多くの要素や要素スタイルは、特定のズームレベルでのみ表示されるようになっています。たとえば建物の 3D 表示は、大都市圏全体が見えるほどズームアウトしたビューでは表示されません。また国名のテキストは、地域の幹線道路が見えるほどズームインした状態では表示されません。道路のスタイル設定は道路自体が表示されている場合にのみ表示され、枠線やテクスチャがあるスタイル設定は、対象の道路が見えるレベルまでズームインしなければ表示されません。

色の選択

要素の色を選択するには、視覚的なカラー選択ツールを使用するか、RGB 値、HSV 値、16 進数コードを直接入力します。

カラー選択ツールを示す詳細なスクリーンショット。上部に長方形の彩度と明度のセレクタがあり、それに続き小さい色相選択ツールがあり、赤、紫、青、緑、黄、オレンジ色のスペクトルが表示されています。その下には色値を入力する数値フィールドがあり、その下にはユーザーが入力する値のタイプ(RGB、HSL、16 進数コード)を選択できるバーがあります。

スタイル エディタのヒント

  • すべてのズームレベルで要素のスタイルを調整および完成させることができる「スタイル サンドボックス」を作成してから、目的のスタイルを「作業中」マップスタイルに複製します。
  • マップ スタイル エディタを初めて使用するときは、要素のスタイル設定を最上位のジオメトリのみに追加するか、塗りつぶしとストロークのスタイルを設定します。ただし、両方は行いません。テキストについても同様です。最上位のテキストからラベル全体のスタイルを設定するか、塗りつぶしとストロークのスタイルを個別に設定します。ただし、両方のスタイル設定は行いません。特定の要素のすべてのレベルのスタイルを設定することも可能ですが、特に、塗りつぶしとストロークの両方のスタイルを設定する場合や、複数の z レベルの経由地を追加する場合は、管理が複雑になる可能性があります。
  • ズームインとズームアウトを行って、複数のズームレベルでスタイルがどのように表示されるかを確認します。