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.
CSS properties
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:
- Light theme:
PlaceAttributionElement.lightSchemeColorwith attributes for white, gray, and black. - Dark theme:
PlaceAttributionElement.darkSchemeColorwith 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>
