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.

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. The Code tab provides configurations in HTML/CSS, Kotlin/XML, and Swift.

CSS properties

Default color scheme

By default, Places UI Kit components automatically adapt to the user's preferred color scheme, detecting whether the user has their browser or system set to light or dark mode. The component's appearance will automatically adjust to match the user's preference.

When applying your own custom styles, ensure you test your changes in both light and dark modes to prevent visual inconsistencies. If your application uses a single, fixed theme, the automatic theme switching can lead to a poor user experience. For example, a dark-themed component might appear in your light-themed app. To prevent this, you can force the component to always render in a specific theme by setting color-scheme in CSS.

Google Maps brand attribution

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:

• Light theme: PlaceAttributionElement.lightSchemeColor with attributes for white, gray, and black.
• Dark theme: PlaceAttributionElement.darkSchemeColor with attributes for white, gray, and black.

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