Places UI Kit Custom Styling

The Places UI Kit supports a variety of settings and custom CSS properties to configure the display elements. Use the Customization tool and CSS properties reference table below to see how these properties can be applied to the UI Kit.

CSS properties mapped to the Places UI Kit elements

The Places UI Kit offers a design system approach to visual customization roughly based on Material Design (with some Google Maps-specific modifications). See Material Design's reference for Color and Typography. By default, the style adheres to the Google Maps visual design language.

Customization tool

Use this tool to visualize custom configurations in a Places UI Kit element.

CSS properties

Property Details Compact Element Details Element Usage
Color (system)
--gmp-mat-color-surface ✔ ✔ Container and dialog background
--gmp-mat-color-on-surface ✔ ✔ Headings, dialog content
--gmp-mat-color-on-surface-variant ✔ ✔ Place information
--gmp-mat-color-primary ✔ ✔ Links, loading indicator, overview icons
--gmp-mat-color-disabled-surface ✔ Unfilled star rating
--gmp-mat-color-positive ✔ ✔ Place "Open" now label
--gmp-mat-color-positive-container ✔ Available EV charger badge
--gmp-mat-color-on-positive-container ✔ Available EV charger badge content
--gmp-mat-color-negative ✔ ✔ Place "Closed" now label
--gmp-mat-color-info ✔ ✔ Accessible entrance icon
--gmp-mat-color-secondary-container ✔ ✔ Button background
--gmp-mat-color-on-secondary-container ✔ ✔ Button text and icon
--gmp-mat-color-neutral-container ✔ ✔ Review date badge, loading placeholder shapes
--gmp-mat-color-on-neutral-container ✔ ✔ Review date, loading error
--gmp-mat-color-outline-decorative ✔ ✔ Container border
Typography (system)
--gmp-mat-font-family ✔ ✔ Base font-family for all typography
--gmp-mat-font-display-small ✔ Place name
--gmp-mat-font-headline-medium ✔ ✔ Dialog headings
--gmp-mat-font-title-small ✔ Place name
--gmp-mat-font-body-medium ✔ Place information, dialog content
--gmp-mat-font-body-small ✔ Place information
--gmp-mat-font-label-large ✔ ✔ Button content
--gmp-mat-font-label-medium ✔ Badge content
Container (component)
border (on :host) ✔ ✔ Container
border-radius (on :host) ✔ ✔ Container

Google Maps brand attribution

Property Details Compact Element Details Element Usage
(black | white | gray) ✔ ✔ Google Maps brand attribution,
Google Maps disclosure button

Google Maps' terms of service require you to use one of three brand colors for the Google Maps attribution. This attribution must be visible and accessible when customization changes have been made. See the Attribution requirements for more information.

We offer a choice of three brand colors that can be independently set for light and dark themes: 

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