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

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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 Android1Maps SDK for iOSJavaScriptMaps Static API で利用可能ですが、すべてのプラットフォームですべての対象物が表示されるわけではありません。

始める前に

  • マップ ID を作成する
    クラウドベースの地図のスタイル機能を使用するには、マップ ID を使用して地図を読み込む必要があります。
  • ハードコーディングされたスタイル設定から移行
    ハードコードされたスタイル設定(JSON や URL クエリ パラメータなど)でカスタマイズされている既存の地図で Cloud ベースのマップのスタイル設定を使用するには、マップ ID を追加する前に、ハードコードされたスタイル設定を削除して、将来の機能との競合を回避することをおすすめします。JSON スタイルを新しい地図のスタイルにインポートできます。
* 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 地図のスタイルを設定する方法を示す JavaKotlin のサンプル アプリケーションを確認できます。

既知の問題

アプリがユーザーに配信されると、マップ 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 ファイルを編集し、kAPIKey 定数の定義に API キーを貼り付けます。

```
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] セクションの地図のカスタマイズのデモをクリックします。

[スタイル マップ] をクリックして、異なるマップ 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;

JavaScript

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

window.initMap = initMap;
サンプルを表示

サンプルを試す

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


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