ズームレベルのスタイルを設定する

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

表示対象: この対象物は、Android、iOS、JavaScript、Maps Static 上に表示されます。

表示中の地図のズームレベルに応じて対象物をハイライト表示することで、ユーザーのニーズに合わせて地図をカスタマイズできます。たとえば、ユーザーが特定の場所をズームインしたら、その地図上の場所や道路がハイライト表示されるようにできます。

地図上の対象物の要素は、地図のあらゆるズームレベルで常に同じスタイルで表示するよう設定できます。また、一部の要素については、ズームレベルの違いに応じて別のスタイルにすることもできます。

すべての対象物でズームレベルをカスタマイズできるわけではありません。地図上の対象物の要素の中で、ズームレベル スタイリングが可能なものには、右側にひし形のアイコンがあります。

ズームレベル スタイリングが可能なことを示すひし形のアイコン

ズームレベル スタイリングを理解する

ズームレベルは 0 から始まり、最大の 22 までズームアウトすると世界全体が表示されます。また、最大限にズームインすると、その地図の最も細かい要素が表示されます。keyzoom は、新しいスタイルの適用を始めるズームレベルです。

地図上の対象物に対し、さまざまなズームレベルごとに異なるスタイルを設定した場合、各スタイルは指定したレベルよりも上の(さらにズームインした)すべてのレベルで適用され、次のズームレベルに達すると、そのレベルのスタイルが適用されます。ズームレベル 0 には必ず現在のスタイルが適用されます。

例: ズームレベル 5 と 10 にスタイルを設定した場合:

  • ズームレベル 5 のスタイルは、ズームレベル 5 ~ 9 まで適用されます。
  • ズームレベル 10 のスタイルは、ズームレベル 10 ~ 22 まで適用されます。
  • ズームレベル 0~4 では、現在のスタイルが維持されます。

ズームレベルに応じて地図上の対象物に適用されるカスタム スタイルは、地図上の対象物全体に適用されるどのカスタム スタイルよりも優先されます。

3D 地図のズームレベルの切り替えについて

3D 地図を傾けたり、ズームレベルを切り替えたりすると、設定したズームレベルのスタイル以外の切り替え色が表示されることがあります。

たとえば、ズームレベルのスタイルを次のように設定した場合:

  • ズームレベル 10 では、水域の塗りつぶしの色は黒です。
  • ズームレベル 11 の場合、水域の塗りつぶしの色は白。

次の図に示すように、2 つのズームレベル間で切り替えるときに、水域の塗りつぶし色がグレーで表示されることがあります。

ズームレベル 10 では水域の塗りつぶし色が黒、ズームレベル 11 に移行する間はグレー、ズームレベル 11 では白

さまざまなズームレベルでカスタマイズする

  1. Cloud コンソールで [地図のスタイル] に移動して、必要に応じてプロジェクトを選びます。

  2. 地図のスタイルを作成するか既存のスタイルを開き、[カスタマイズ] を選択します。詳しくは、地図のスタイルを作成するをご覧ください。

  3. [地図上の対象物] ペインで、カスタマイズする地図上の対象物を選びます。パネルが開き、カスタマイズ可能な要素が表示されます。

  4. ズームレベル スタイリングを追加する要素で、その右にあるひし形ズームアイコンを選択し、ズームレベル スタイリング パネルを開きます。

    ズームレベル スタイリングが可能なことを示すひし形のアイコン

  5. [現在のズーム] の横で、カスタマイズするズームレベルを選びます。すると、そのズームレベルに合わせてプレビュー用の地図が調整されます。

    現在のズームレベルのすべての keyzoom スタイルとセレクタが表示されているメニュー

  6. [keyzoom を追加] を選択します。選択したズームレベルの新しい keyzoom がズームレベル スタイリング ペインに追加され、対応するデフォルトの基本地図の値が表示されます。

    現在のズームレベル 12 の新しいズームレベル スタイルとデフォルトの基本地図の値が表示されているズームレベル スタイリング ペイン。

  7. このズームレベルと、必要に応じて他のズームレベルのスタイルを設定します。

    新しいズームレベルのスタイルを設定する様子

  8. 別のズームレベルを設定するには、[現在のズーム] を変更して再び [keyzoom を追加] を選択し、リストに別のズームレベルを追加します。その後も必要に応じて、ズームレベルのスタイルの追加と設定を続けます。

  9. 作業が完了したら、ズームレベル スタイリング ペインを閉じます。

要素に使用されるデフォルトの基本地図の色の値を上書きする

すべてのズームレベルで、要素に使用されるデフォルトの基本地図の色の値をすべて上書きするには、まず要素ペインで要素のスタイルを設定します。keyzoom を追加すると、デフォルトの基本地図の色ではなく、要素に設定した色が使用されます。

ズームレベル スタイリングを保存して公開する

  1. 地図のスタイル設定の変更を保存するには、[保存] を選択します。

  2. 地図のスタイルに関連付けたマップ ID で変更を公開するには、[公開] を選択します。

ズームレベルのスタイルを削除する

  1. [地図上の対象物] ペインで、カスタマイズした地図上の対象物を選択します。

  2. スタイル要素の横にある右側のひし形を選択します。カスタムのズームレベル スタイルが設定された要素には、青で塗りつぶされたひし形アイコンが表示されています。

    視認性スタイル要素には、塗りつぶしのない灰色のひし形アイコンが表示されます。塗りつぶし色のスタイル要素には、青で塗りつぶされたひし形アイコンが表示されています。これは、カスタムのズームレベル スタイルが設定されていることを示しています。

  3. キーズーム パネルで、マイナス アイコンを選択してズームレベルを削除します。

    ズームレベルのスタイルを削除するには、マイナス アイコンを選択

ズームレベルのスタイルをすべて削除する

地図上の対象物の要素からカスタム スタイルをすべて削除するには、次のいずれかの操作を行います。

  • 要素パネルで、要素名の横にある マイナス アイコンを選択します。
  • キーズーム パネルで、要素名の横にある リセット アイコンを選択します。

道路レベルの詳細をプレビューする

一部の都市では、拡大レベル 17 以上で、道路幅、歩道、車線表示などのオブジェクトが追加された詳細な道路レベルを既存のスタイルでプレビューできます。スタイル エディタ セッションごとにプレビューを有効にする必要があります。これらの道路詳細地図の機能は、道路レベルの詳細をサポートする SDK または API でのみ表示されます。アプリに適用するには、関連する SDK または API を道路レベルの詳細をサポートするバージョンに更新する必要があります。API と SDK のバージョンについて詳しくは、Google Maps Platform のロードマップの詳細をご覧ください。

道路の詳細のプレビューを有効にするには、次の操作を行います。

  1. Google Cloud コンソールで、[地図のスタイル] に移動します。

  2. 既存のスタイルを選択するか、スタイルを作成します。

  3. [カスタマイズ] をクリックします。

  4. スタイル エディタで、[道路の詳細のプレビュー] をクリックします。

  5. プレビュー ダイアログで、[道路の詳細] をオンに切り替えます。

スタイル設定が可能な道路レベルの詳細については、地図でスタイル設定が可能な要素をご覧ください。

ズームレベル 17 以上のスタイル切り替えを滑らかにするために、ズームレベルのスタイルを追加

道路レベルの詳細が有効になっているズームレベル 17 以上では、道路地図の対象物が消え、代わりに地表地図の対象物になります。ズームインすると、Surface 地図上の対象物に適用されるスタイル設定された要素が表示され、道路地図上の対象物とスタイルが置き換えられます。

地図上の対象物のスタイル間の切り替えをスムーズにするには、ズームレベルのスタイルを追加して、特定のズームレベル間でスタイルの色を固定します。ズームレベル スタイルを使用すると、新しいスタイルカラーにスムーズに移行するタイミングを制御することもできます。

たとえば、ズームレベル 16 では、リストに表示される地図上の対象物は次のようにスタイル設定されます。

  • 動脈は赤色です。
  • 高速道路は青色で表示されます。
  • ローカルは黄色です。
  • 表面はベージュです。

ズームレベル 16 のシアトルの地図。道路が赤、青、黄色のスタイルで表示されています。

ズームレベル 17 にズームインすると、幹線道路、高速道路、一般道路がベージュでスタイル設定された Surface 地図上の対象物に変わります。

ズームレベル 17 の同じシアトルの地図。道路がすべてベージュ色になっています。これは、サーフェス地図機能に切り替わったためです。

道路地図の対象物とサーフェス地図の対象物間の移行をスムーズにするには、次のキーズームとズームレベルのスタイル設定を追加します。

地図上の対象物 ズームレベル 0 ズームレベル 12 ズームレベル 17
幹線道路 ベージュ
高速道路 ベージュ
ローカル ベージュ

ズームレベル スタイリングを追加した後、ズームインすると次のようになります。

  • 幹線道路、高速道路、一般道路は、ズームレベル 0 ~ 12 でカスタム スタイル設定の色で表示されます。
  • ズームレベル 12 を超えると、スタイル設定された色はベージュ色にフェードインし始め、ズームレベル 17 で Surface 地図の対象物のスタイルからベージュ色に完全に移行します。

同じシアトルの地図ですが、ズームレベル 12 と 17 にスタイルを追加して、青い高速道路の色がベージュの地面にフェードインするようにしています。