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

プラットフォームを選択: Android iOS JavaScript ウェブサービス

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

始める前に

  • マップ ID を作成する
    Cloud ベースのマップのスタイル設定を使用するには、マップ ID を使用して地図を読み込む必要があります。
  • ハードコードされたスタイルから移行する
    マップ ID を追加する前に、ハードコードされたスタイル設定（JSON または URL クエリ パラメータなど）でカスタマイズした既存の地図で Cloud ベースの地図のスタイル設定を使用するには、ハードコードされたスタイル設定を解除して、将来の機能との競合が発生しないようにすることをおすすめします。JSON スタイルを新しい地図のスタイルにインポートできます。

課金

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

例

以下は、マップ 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
サンプルを表示

サンプルを試す

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