Places UI Kit は、ディスプレイ要素を構成するためのさまざまな設定とカスタム CSS プロパティをサポートしています。これらのプロパティを UI キットに適用する方法については、カスタマイズ ツールと以下の CSS プロパティの参照表をご覧ください。
Places UI Kit は、マテリアル デザインをベースにした視覚的なカスタマイズにデザインシステム アプローチを提供します（Google マップ固有の変更がいくつかあります）。色とタイポグラフィについては、マテリアル デザインのリファレンスをご覧ください。デフォルトでは、このスタイルは Google マップのビジュアル デザイン言語に準拠しています。
カスタマイズ ツール
このツールを使用して、Places UI Kit 要素のカスタム構成を可視化します。
CSS プロパティ
Google マップのブランド アトリビューション
| プロパティ | 詳細コンパクト要素 | 詳細要素 | 用途 |
|---|---|---|---|
| （black | white | gray） | ✔ | ✔ | Google マップのブランド帰属情報、 Google マップの開示ボタン |
Google マップの利用規約では、Google マップの帰属表示に 3 つのブランドカラーのいずれかを使用することが義務付けられています。この帰属情報は、カスタマイズが変更されたときに表示され、アクセス可能である必要があります。 詳しくは、帰属表示の要件をご覧ください。
ライトモードとダークモードで個別に設定できる 3 つのブランドカラーが用意されています。
- ライトモード: 白、グレー、黒の属性を持つ
PlaceAttributionElement.lightSchemeColor。 - ダークモード: 白、グレー、黒の属性を持つ
PlaceAttributionElement.darkSchemeColor。
<gmp-place-content-config>
<gmp-place-attribution
light-scheme-color="black"
dark-scheme-color="white"
></gmp-place-attribution>
</gmp-place-content-config>