Estilo personalizado do kit de interface do Google Places

O kit de interface do Places oferece suporte a 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 do CSS abaixo para saber como essas propriedades podem ser aplicadas ao kit de interface.

Propriedades CSS mapeadas para os elementos do kit de interface do Places

O kit de interface do Places oferece uma abordagem de sistema de design para personalização visual com base no Material Design (com algumas modificações específicas do Google Maps). Consulte a referência do Material Design para Cores 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 ✔ ✔ Plano de fundo do contêiner e da caixa de diálogo
--gmp-mat-color-on-surface ✔ ✔ Títulos e 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 ✔ Estrela sem preenchimento
--gmp-mat-color-positive ✔ ✔ Colocar o rótulo "Abrir" 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 do carregador de VE
--gmp-mat-color-negative ✔ ✔ Coloque o rótulo "Fechado" agora
--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 ✔ ✔ Ícone de data de revisão, formas de marcador de carregamento
--gmp-mat-color-on-neutral-container ✔ ✔ Erro de carregamento da data da revisão
--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 sobre o 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 da marca Google Maps

Propriedade Elemento compacto de detalhes Elemento de detalhes Uso
(preto | branco | cinza) ✔ ✔ Atribuição da marca 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 cores de marca que podem ser definidas de forma independente para temas claros e escuros: 

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