Select platform: Android iOS JavaScript

Custom styling

Place details visual customization — Visual customization examples

You can customize the colors, typography, spacing, borders, and corners of these Places UI kit components:

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.

The look and feel of the component is customized with the placesMaterialColor, placesMaterialFont, placesMaterialShape, and placesMaterialTheme structs.

The Places UI Kit provides a dark theme by default, so you may need to customize both dark and light themes. To customize the dark theme, add values for .dark and attribution.darkModeColor to your custom theme.

You can customize the following styles:

Theme attribute	Usage
Color
`theme.color.surface`	Container and dialog background
`theme.color.outlineDecorative`	Container border
`theme.color.primary`	Links, loading indicator, overview icons
`theme.color.onSurface`	Headings, dialog content
`theme.color.onSurfaceVariant`	Place information
`theme.color.secondaryContainer`	Button background
`theme.color.onSecondaryContainer`	Button text and icon
`theme.color.neutralContainer`	Review date badge, loading placeholder shapes
`theme.color.onNeutralContainer`	Review date, loading error
`theme.color.positiveContainer`	Available EV charger badge
`theme.color.onPositiveContainer`	Available EV charger badge content
`theme.color.positive`	Place "Open" now label
`theme.color.negative`	Place "Closed" now label
`theme.color.info`	Accessible entrance icon
`theme.measurement.borderWidthButton`	Open in maps and OK buttons

Typography
`theme.font.bodySmall`	Place information
`theme.font.bodyMedium`	Place information, dialog content
`theme.font.labelMedium`	Badge content
`theme.font.labelLarge`	Button content
`theme.font.headlineMedium`	Dialog headings
`theme.font.displaySmall`	Place name
`theme.font.titleSmall`	Place name

Spacing
`theme.measurement.spacingExtraSmall`
`theme.measurement.spacingSmall`
`theme.measurement.spacingMedium`
`theme.measurement.spacinglarge`
`theme.measurement.spacingExtraLarge`
`theme.measurement.spacingTwoExtraLarge`

Measurement
`borderWidth`	Container
`theme.measurement.borderWidthButton`

Shape
`theme.shape.cornerRadius`	Container
`theme.shape.cornerRadiusButton`	Open in Maps and OK buttons (excludes round icon button)
`theme.shape.cornerRadiusThumbnail`	Place thumbnail image
`theme.shape.cornerRadiusCollageOuter`	Media collage
`theme.shape.cornerRadiusCard`	Place card, User review card
`theme.shape.cornerRadiusDialog`	Google Maps disclosure dialog

Google Maps Brand Attribution
`attribution.lightModeColor`	Light theme Google Maps attribution and disclosure button (enums for white, gray, and black)
`attribution.darkModeColor`	Dark theme Google Maps attribution and disclosure button (enums for white, gray, and black)

Attribution colors

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.

We offer 3 brand colors to choose from that can be independently set for light and dark themes:

Light theme: attributionColorLight with enums for white, gray, and black.
Dark theme: attributionColorDark with enums for white, gray, and black.

Examples

This function creates a theme that overrides the default style attributes. Any theme attributes that are not overridden use the default styles.

Swift

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  color.outlineDecorative = (colorScheme == .dark ? .white : .black)
  color.onSurface = (colorScheme == .dark ? .yellow : .red)
  color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
  color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
  color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
  color.positive = (colorScheme == .dark ? .yellow : .red)
  color.primary = (colorScheme == .dark ? .yellow : .purple)
  color.info = (colorScheme == .dark ? .yellow : .purple)
  var shape = PlacesMaterialShape()
  shape.cornerRadius = 10
  var font = PlacesMaterialFont()
  font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
  font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
  font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
  var attribution = PlacesMaterialAttribution()
  attribution.lightModeColor = .black
  attribution.darkModeColor = .white
  theme.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

Custom styling

Attribution colors

Examples

Swift

Full examples for each component