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

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 を使用して地図を読み込む必要があります。
ハードコードされたスタイルから移行する
マップ ID を追加する前に、ハードコードされたスタイル設定（JSON または URL クエリパラメータなど）でカスタマイズした既存の地図で Cloud ベースの地図のスタイル設定を使用するには、ハードコードされたスタイル設定を解除して、将来の機能との競合が発生しないようにすることをおすすめします。JSON スタイルを新しい地図のスタイルにインポートできます。
- Android の場合: MapStyleOptions を更新します
- iOS の場合: GMSMapStyle クラスを更新します
- JavaScript の場合: MapTypeStyle スタイル設定を削除します
- Maps Static の場合: style パラメータを削除します

* Maps SDK for Android をアップグレードする
Cloud ベースのマップのスタイル設定を使用するには、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 サンプルの GoogleMap サンプルアプリと CloudBasedMapStylingViewController プロジェクト（Swift 向け GitHub のサンプル | Objective-C）をご覧ください。

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

ゼロから始める代わりに、こちらの Objective-C サンプルアプリケーションを使用して、クラウドから iOS 地図のスタイルを設定する方法をご覧ください。

ベータ版デモアプリをビルドする

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

まだ API キーを持っていない場合は、こちらの手順に沿って Cloud Console でプロジェクトを設定し、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 Console で設定されたスタイルを使用して地図のスタイルを設定する方法を示しています。

デモアプリケーションが起動し、リストの上部にある [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 CodeSandbox.io Google Cloud Shell

Maps Static API

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

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

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 のライトモードではご利用いただけません。 ↩