Cloud ベースのマップのスタイル設定

Google Maps Platform では、Cloud ベースのマップのスタイル設定機能を提供しています。この機能により、Google Cloud コンソールを使用した地図のスタイル設定、カスタマイズ、管理が容易になります。また、スタイルを変更するたびにアプリのコードを更新する必要がなくなり、パーソナライズされた地図のユーザー エクスペリエンスを向上させることができます。

2020 年 9 月 15 日より前に作成されたスタイルには、Google マップの改良された自然対象物は表示されません。Google マップの改良された自然対象物を地図のスタイルに使用するには、地図のスタイルを作成する必要があります。

Cloud ベースのマップのスタイル設定では、マップ ID を設定すると、コードを一切変更することなく、Google マップを使用するすべてのアプリ上の地図のスタイルを定義、編集できます。 すべてのスタイルの変更は Cloud コンソールで行えます。コーディング スキルは必要ありません。道路、建物、水域、スポット、交通機関のルートなど、多くの地図要素の外観や色を変更できます。

主な機能は次のとおりです。

• Cloud ベースのマップのスタイル設定: JSON を使って地図のスタイル設定をコーディングする代わりに、マップ ID と地図のスタイルを使って Google Cloud コンソールの動的地図と静的地図の管理およびスタイル設定を行うことができます。
• ベクターマップ: JavaScript のデベロッパーは、maps.google.com で提供される WebGL で高速化されたベクターベースのマップと同じものを、自作のウェブアプリで直接使用できます。
• 地図上の場所のフィルタリング: 必要に応じてビジネスの場所の 5 つのカテゴリを地図上で非表示にできます。
• 地図上の場所の密度制御: 基本地図に表示する場所の密度を調整して、デフォルトで表示する場所の数を増やしたり減らしたりできます。

Cloud ベースのマップのスタイル設定は、Maps SDK for Android¹、Maps SDK for iOS、JavaScript、Maps Static API で利用可能ですが、すべてのプラットフォームですべての対象物が表示されるわけではありません。

始める前に

• マップ ID を作成する
  Cloud ベースのマップのスタイル設定を使用するには、マップ ID を使用して地図を読み込む必要があります。
• ハードコードされたスタイルから移行する
  既存の地図をカスタマイズするためにハードコードされているスタイル設定（JSON または URL クエリ パラメータなど）があれば、機能の競合を避けるためにそれらを削除してから、マップ ID を追加して Cloud ベースの地図のスタイル設定を適用することをおすすめします。JSON スタイルを新しい地図のスタイルにインポートできます。
  • Android の場合: MapStyleOptions を更新します
  • iOS の場合: GMSMapStyle クラスを更新します
  • JavaScript の場合: MapTypeStyle スタイル設定を削除します
  • Maps Static の場合: style パラメータを削除します

お支払い

Cloud ベースのマップのスタイル設定を使用するには、マップ ID が必要です。Maps SDK for Android、Maps SDK for iOS、JavaScript では、マップ ID を使用すると Dynamic Maps SKU に対する課金が発生します。Maps Static API では、マップ ID を使用すると Static Maps SKU に対する課金が発生します。

例

Android

ApiDemos サンプルアプリを実行する

ApiDemos サンプルアプリを実行するには、GitHub サンプル（Java | Kotlin）とデモ CloudBasedMapStylingDemoActivity（Java | Kotlin）をご覧ください。

クラウドから Android 地図のスタイルを設定する方法を示す Java と Kotlin のサンプル アプリケーションを確認できます。

既知の問題

アプリがユーザーに配信されると、マップ ID が関連付けられた地図のカスタム スタイルを Google Cloud コンソールから更新できるようになります。新しいスタイルは数時間以内にアプリに反映されます。

テスト用に新しいカスタム スタイルをすぐ表示するには、テストするデバイスからアプリデータを消去します。デバイスのデータを消去する方法について詳しくは、Android ヘルプ - 空き容量を増やすをご覧ください。

設定はスマートフォンによって異なる場合があります。詳しくは、デバイスのメーカーにお問い合わせください。

iOS

ApiDemos サンプルアプリを実行する

ApiDemos サンプルアプリを実行するには、GitHub サンプル GoogleMap サンプルアプリを参照して、CloudBasedMapStylingViewController プロジェクト（Swift | Objective-C 用の GitHub サンプル）をご覧ください。

Cloud Styling CocoaPod または GitHub のデモ（オプション）

ゼロから始めるのではなく、こちらでクラウドから iOS 地図のスタイルを設定する方法を示す Objective-C サンプル アプリケーションをお試しください。

ベータ版デモアプリのビルド

Xcode でコンパイル ボタンを押して現在のスキームをビルドし、実行します。ビルド時にエラーが発生し、SDKDemoAPIKey.h ファイルに API キーを入力するよう求められます。

API キーをまだお持ちでない場合は、こちらの手順に沿って Cloud コンソールでプロジェクトを設定し、API キーを取得してください。Cloud Console で鍵を構成するときに、アプリのバンドル ID を指定して、自分のアプリだけが鍵を使用できるようにできます。SDK サンプルアプリのデフォルトのバンドル ID は com.example.GoogleMapsDemos です。

SDKDemoAPIKey.h ファイルを編集して、作成した API キーを kAPIKey 定数の定義に貼り付けます。

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

Xcode から SDKDemoAPIKey.h ファイルを編集用にロック解除するよう求められたら、[Unlock] を選択します。

次の行を削除します。

```
#error Register for API Key and insert here.
```

プロジェクトをビルドして実行します。

Cloud ベースのマップのスタイル設定を使用した地図のデモ

CloudStyling デモでは、Google Cloud コンソールで設定したスタイルを使用して地図のスタイルを設定する方法を示します。

デモアプリケーションが起動したら、リストの上部にある [Beta Samples] セクションにある [Map Customization デモ] をクリックします。

[スタイルマップ] をクリックして、さまざまなマップ ID を読み込んだ際の効果を確認します。

独自のスタイルを追加することもできます（[スタイル マップ] > [新しいマップ ID を追加]）。これにより、スタイル付き地図をカスタマイズして表示されます。

JavaScript

以下は、マップ ID を使用してカスタムのスタイル付き地図を読み込む基本的な例です。この場合、Maps JavaScript は地図が読み込まれるときにマップ ID 8e0a97af9386fef を参照し、現在そのマップ ID に関連付けられている地図のスタイルを自動的に適用します。

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
index.js

Maps Static API

マップ ID は、特定の地図のスタイルまたは対象物に関連付けられた識別子です。Google Cloud Console で地図のスタイルを設定してマップ ID に関連付け、コード内でマップ ID を参照すると、関連するマップスタイルがアプリに表示されます。以降に行われるスタイルの更新が自動的にアプリに反映されるため、ユーザー自らが更新する必要がなくなります。

1. style パラメータでカスタマイズした既存の地図で Cloud ベースのマップのスタイル設定を使用している場合は、今後の機能との競合を避けるため、必ず削除してください。

2. Google のウェブ API を使用する新規または既存の地図にマップ ID を追加するには、map_id URL パラメータを追加して、マップ ID に設定します。次の例では、Maps Static API を使ってマップ ID を地図に追加しています。

   <img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />