O kit de interface do Places é compatível com várias configurações e propriedades CSS personalizadas para configurar os elementos de exibição. Use a ferramenta de personalização e a tabela de referência de propriedades CSS abaixo para saber como essas propriedades podem ser aplicadas ao UI Kit.

O kit de interface do Places oferece uma abordagem de sistema de design para personalização visual baseada no Material Design (com algumas modificações específicas do Google Maps). Consulte a referência do Material Design para Cor e Tipografia. Por padrão, o estilo segue a linguagem de design visual do Google Maps.
Ferramenta de personalização
Use essa ferramenta para visualizar configurações personalizadas em um elemento do Kit de Interface do Places.
Propriedades do CSS
Propriedade | Elemento compacto de detalhes | Elemento de detalhes | Uso |
---|---|---|---|
Cor (sistema) | |||
--gmp-mat-color-surface |
✔ | ✔ | Segundo plano do contêiner e da caixa de diálogo |
--gmp-mat-color-on-surface |
✔ | ✔ | Títulos, conteúdo da caixa de diálogo |
--gmp-mat-color-on-surface-variant |
✔ | ✔ | Informações sobre o lugar |
--gmp-mat-color-primary |
✔ | ✔ | Links, indicador de carregamento, ícones de visão geral |
--gmp-mat-color-disabled-surface |
✔ | Classificação por estrelas não preenchida | |
--gmp-mat-color-positive |
✔ | ✔ | Colocar o marcador "Aberto agora" |
--gmp-mat-color-positive-container |
✔ | Selo de carregador de VE disponível | |
--gmp-mat-color-on-positive-container |
✔ | Conteúdo disponível do selo de carregador de VE | |
--gmp-mat-color-negative |
✔ | ✔ | O rótulo "Fechado" agora é "Fechado permanentemente" |
--gmp-mat-color-info |
✔ | ✔ | Ícone de entrada acessível |
--gmp-mat-color-secondary-container |
✔ | ✔ | Plano de fundo do botão |
--gmp-mat-color-on-secondary-container |
✔ | ✔ | Texto e ícone do botão |
--gmp-mat-color-neutral-container |
✔ | ✔ | Revisar o selo de data, carregar formas de marcador de posição |
--gmp-mat-color-on-neutral-container |
✔ | ✔ | Data da revisão, erro de carregamento |
--gmp-mat-color-outline-decorative |
✔ | ✔ | Borda do contêiner |
Tipografia (sistema) | |||
--gmp-mat-font-family |
✔ | ✔ | Família de fontes base para toda a tipografia |
--gmp-mat-font-display-small |
✔ | Nome do lugar | |
--gmp-mat-font-headline-medium |
✔ | ✔ | Títulos de caixa de diálogo |
--gmp-mat-font-title-small |
✔ | Nome do lugar | |
--gmp-mat-font-body-medium |
✔ | Informações do lugar, conteúdo da caixa de diálogo | |
--gmp-mat-font-body-small |
✔ | Informações sobre o lugar | |
--gmp-mat-font-label-large |
✔ | ✔ | Conteúdo do botão |
--gmp-mat-font-label-medium |
✔ | Conteúdo do selo | |
Contêiner (componente) | |||
border (em :host) |
✔ | ✔ | Contêiner |
border-radius (em :host) |
✔ | ✔ | Contêiner |
Atribuição de marca do Google Maps
Propriedade | Elemento compacto de detalhes | Elemento de detalhes | Uso |
---|---|---|---|
(preto | branco | cinza) | ✔ | ✔ | Atribuição de marca do Google Maps, botão de divulgação do Google Maps |
Os Termos de Serviço do Google Maps exigem que você use uma das três cores da marca para a atribuição do Google Maps. Essa atribuição precisa estar visível e acessível quando as mudanças de personalização forem feitas. Consulte os requisitos de atribuição para mais informações.
Oferecemos três opções de cores da marca que podem ser definidas de forma independente para temas claros e escuros:
- Tema claro:
PlaceAttributionElement.lightSchemeColor
com atributos para branco, cinza e preto. - Tema escuro:
PlaceAttributionElement.darkSchemeColor
com atributos para branco, cinza e preto.
<gmp-place-content-config> <gmp-place-attribution light-scheme-color="black" dark-scheme-color="white" ></gmp-place-attribution> </gmp-place-content-config>