Places UI キットのカスタム スタイル設定

Places UI Kit は、表示要素を構成するためのさまざまな設定とカスタム CSS プロパティをサポートしています。以下のカスタマイズ ツールと CSS プロパティの参照表で、これらのプロパティを UI キットに適用する方法を確認してください。

Places UI キットの要素にマッピングされた CSS プロパティ

Places UI キットは、マテリアル デザイン（Google マップ固有の変更あり）にほぼ基づいた、ビジュアル カスタマイズに対するデザイン システム アプローチを提供します。マテリアル デザインの色とタイポグラフィのリファレンスをご覧ください。デフォルトでは、スタイルは Google マップのビジュアル デザイン言語に準拠しています。

カスタマイズ ツール

このツールを使用して、Places UI キット要素のカスタム構成を可視化します。

CSS プロパティ

プロパティ Details Compact 要素 Details 要素 用途
Color（システム）
--gmp-mat-color-surface ✔ ✔ コンテナとダイアログの背景
--gmp-mat-color-on-surface ✔ ✔ 見出し、ダイアログのコンテンツ
--gmp-mat-color-on-surface-variant ✔ ✔ お店/スポット情報
--gmp-mat-color-primary ✔ ✔ リンク、読み込みインジケーター、概要アイコン
--gmp-mat-color-disabled-surface ✔ 星評価（塗りつぶされていない）
--gmp-mat-color-positive ✔ ✔ 「営業中」ラベルを配置
--gmp-mat-color-positive-container ✔ EV 充電器ありバッジ
--gmp-mat-color-on-positive-container ✔ 利用可能な EV 充電器バッジのコンテンツ
--gmp-mat-color-negative ✔ ✔ 閉店した場所のラベル
--gmp-mat-color-info ✔ ✔ 入口がバリアフリーのアイコン
--gmp-mat-color-secondary-container ✔ ✔ ボタンの背景
--gmp-mat-color-on-secondary-container ✔ ✔ ボタンのテキストとアイコン
--gmp-mat-color-neutral-container ✔ ✔ 日付バッジ、読み込みプレースホルダの形状を確認
--gmp-mat-color-on-neutral-container ✔ ✔ レビューの日付、読み込みエラー
--gmp-mat-color-outline-decorative ✔ ✔ コンテナの境界線
タイポグラフィ（システム）
--gmp-mat-font-family ✔ ✔ すべてのタイポグラフィの基本フォント ファミリー
--gmp-mat-font-display-small ✔ 場所の名前
--gmp-mat-font-headline-medium ✔ ✔ ダイアログの見出し
--gmp-mat-font-title-small ✔ 場所の名前
--gmp-mat-font-body-medium ✔ 場所の情報、ダイアログのコンテンツ
--gmp-mat-font-body-small ✔ お店/スポット情報
--gmp-mat-font-label-large ✔ ✔ ボタンのコンテンツ
--gmp-mat-font-label-medium ✔ バッジのコンテンツ
コンテナ（コンポーネント）
border（:host 上） ✔ ✔ コンテナ
border-radius（:host 上） ✔ ✔ コンテナ

Google マップのブランド アトリビューション

プロパティ Details Compact 要素 Details 要素 用途
（黒 | 白 | グレー） ✔ ✔ Google マップのブランド帰属、
Google マップの開示ボタン

Google マップの利用規約では、Google マップの帰属表示に 3 つのブランドカラーのうちの 1 つを使用することが求められています。この帰属情報は、カスタマイズの変更が行われたときに表示され、アクセス可能である必要があります。詳しくは、帰属表示の要件をご覧ください。

ライトテーマとダークテーマで個別に設定できる 3 つのブランドカラーから選択できます。

<gmp-place-content-config>
  <gmp-place-attribution
      light-scheme-color="black"
      dark-scheme-color="white"
  ></gmp-place-attribution>
</gmp-place-content-config>