Benutzerdefiniertes Design für das UI-Kit für Places

Das Places UI Kit unterstützt eine Vielzahl von Einstellungen und benutzerdefinierten CSS-Eigenschaften zum Konfigurieren der Anzeigeelemente. In der Referenztabelle für CSS-Eigenschaften unten erfahren Sie, wie diese Eigenschaften auf das UI-Kit angewendet werden können. Verwenden Sie dazu das Anpassungstool.

CSS-Eigenschaften, die den Places UI Kit-Elementen zugeordnet sind

Das Places UI Kit bietet einen Designsystemansatz für die visuelle Anpassung, der in etwa auf Material Design basiert (mit einigen Google Maps-spezifischen Änderungen). Weitere Informationen finden Sie in den Material Design-Referenzen für Farbe und Typografie. Standardmäßig entspricht der Stil der visuellen Designsprache von Google Maps.

Tool zur individuellen Anpassung

Mit diesem Tool können Sie benutzerdefinierte Konfigurationen in einem Places UI Kit-Element visualisieren.

CSS-Properties

Attribut Kompaktes Element „Details“ Details-Element Nutzung
Farbe (System)
--gmp-mat-color-surface ✔ ✔ Container- und Dialoghintergrund
--gmp-mat-color-on-surface ✔ ✔ Überschriften, Dialoginhalte
--gmp-mat-color-on-surface-variant ✔ ✔ Informationen zum Ort
--gmp-mat-color-primary ✔ ✔ Links, Ladeanzeige, Übersichtssymbole
--gmp-mat-color-disabled-surface ✔ Leere Sterne
--gmp-mat-color-positive ✔ ✔ Label „Jetzt geöffnet“ platzieren
--gmp-mat-color-positive-container ✔ Verfügbares Logo für Ladestationen für Elektrofahrzeuge
--gmp-mat-color-on-positive-container ✔ Verfügbare Inhalte für das Logo „Ladegerät für Elektrofahrzeuge“
--gmp-mat-color-negative ✔ ✔ Label „Geschlossen“ für Orte
--gmp-mat-color-info ✔ ✔ Symbol für barrierefreien Eingang
--gmp-mat-color-secondary-container ✔ ✔ Schaltflächenhintergrund
--gmp-mat-color-on-secondary-container ✔ ✔ Schaltflächentext und ‑symbol
--gmp-mat-color-neutral-container ✔ ✔ Datumsbadge und Platzhalterformen für das Laden
--gmp-mat-color-on-neutral-container ✔ ✔ Rezensionsdatum, Ladefehler
--gmp-mat-color-outline-decorative ✔ ✔ Containerrahmen
Typografie (System)
--gmp-mat-font-family ✔ ✔ Basisschriftfamilie für alle Typografie
--gmp-mat-font-display-small ✔ Name
--gmp-mat-font-headline-medium ✔ ✔ Dialogüberschriften
--gmp-mat-font-title-small ✔ Name
--gmp-mat-font-body-medium ✔ Ortsinformationen, Dialoginhalte
--gmp-mat-font-body-small ✔ Informationen zum Ort
--gmp-mat-font-label-large ✔ ✔ Schaltflächeninhalt
--gmp-mat-font-label-medium ✔ Inhalt des Logos
Container (Komponente)
border (auf :host) ✔ ✔ Container
border-radius (auf :host) ✔ ✔ Container

Markenattribution in Google Maps

Attribut Kompaktes Element „Details“ Details-Element Nutzung
(Schwarz | Weiß | Grau) ✔ ✔ Markenattribute in Google Maps,
Offenlegungsschaltfläche in Google Maps

Gemäß den Nutzungsbedingungen von Google Maps müssen Sie für die Quellenangabe von Google Maps eine von drei Markenfarben verwenden. Diese Quellenangabe muss sichtbar und zugänglich sein, wenn Änderungen an der Anpassung vorgenommen wurden. Weitere Informationen

Wir bieten drei Markenfarben an, die unabhängig für helle und dunkle Designs festgelegt werden können: 

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