このページは Cloud Translation API によって翻訳されました。

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

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

2020 年 9 月 15 日より前に作成されたスタイルでは、Google マップの地形描写の拡張が適用されません。Google マップの地形描写の拡張を地図のスタイルに適用するには、地図のスタイルを作成する必要があります。

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

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

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

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

始める前に

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

* Maps SDK for Android をアップグレードする
クラウドベースの地図のスタイル設定を使用するには、Maps SDK for Android 18.0.0 以降を使用し、最新の Maps SDK for Android レンダラを使用する必要があります。

請求

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 サンプル Google マップのサンプルアプリと 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.
```

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

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

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

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

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

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

JavaScript

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

TypeScript

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

JavaScript

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

サンプルを表示

サンプルを試す

JSFiddle.net Google Cloud Shell

Maps Static API

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

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

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" />

Cloud ベースのマップのスタイル設定は、Android ライトモードではご利用いただけません。 ↩