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

クラウドベースの地図のスタイル設定

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 スタイルを新しい地図のスタイルにインポートできます。
- 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 のデモ

ゼロから始める代わりに、こちらのクラウドから iOS マップのスタイルを設定する方法を示す Objective-C サンプルアプリケーションを試すことができます。

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

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

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

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

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

編集のために SDKDemoAPIKey.h ファイルのロック解除を求めるメッセージが Xcode に表示された場合は、[Unlock] を選択します。

次の行を削除します。

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

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

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

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

サンプルを表示

サンプルを試す

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.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 のライトモードではご利用いただけません。 ↩