Elementos avançados de Place Details (pré-lançamento)

O elemento Advanced Place Details e o elemento Advanced Place Details Compact Element são elementos HTML que mostram detalhes de um lugar:

Os elementos Advanced Place Details e Advanced Place Details Compact Element oferecem os mesmos recursos avançados, incluindo a personalização de botões de ação, a omissão do nome do lugar e a filtragem de avaliações e mídias.

Use a ferramenta de personalização para visualizar como diferentes conjuntos de propriedades afetam a aparência de um elemento Places Details e acessar o código em HTML/CSS, Kotlin/XML, e Swift.

Elemento Advanced Place Details (pré-lançamento)

Clique em um marcador no mapa para conferir os detalhes do lugar em um elemento Advanced Place Details.

O AdvancedPlaceDetailsElement oferece suporte a uma ampla variedade de elementos de conteúdo, incluindo horário de funcionamento completo, site, número de telefone, resumo com tecnologia de IA com substituto para resumo editorial, destaques específicos do tipo, avaliações, resumo das avaliações com tecnologia de IA, além de Plus Code e listas de recursos.

Para mostrar os detalhes do lugar em um mapa, adicione um gmp-advanced-place-details elemento ao gmp-map elemento na página HTML. Inclua um elemento filho, gmp-place-details-place-request, para selecionar o lugar. Ele pode ser um objeto Place, um ID de lugar ou um nome de recurso de lugar: 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-advanced-place-details>
      <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-advanced-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Configurar o conteúdo

É possível controlar o conteúdo específico do lugar mostrado pelo gmp-advanced-place-details elemento aninhando elementos filhos para selecionar e configurar os detalhes do lugar, conforme mostrado neste exemplo: 

        <gmp-advanced-place-details>
            <gmp-place-details-place-request
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
                <gmp-place-attribution></gmp-place-attribution>
        </gmp-advanced-place-details>

Cada elemento de conteúdo filho seleciona um detalhe de lugar correspondente para mostrar: gmp-place-address seleciona o endereço do lugar, gmp-place-price seleciona o nível de preço do lugar etc. Os elementos gmp-place-summary e gmp-place-review-summary fornecem um resumo com tecnologia de IA do lugar e das avaliações, respectivamente. A ordem dos elementos filhos é irrelevante, já que os detalhes selecionados são sempre renderizados em uma ordem predefinida fixa.

Alguns desses elementos podem ser configurados ainda mais usando atributos específicos do conteúdo: atributos:

  • O gmp-place-media elemento é usado para mostrar uma única foto e inclui um lightbox-preferred atributo que abre a foto em um lightbox quando clicado. O lightbox fica desativado por padrão.
  • O gmp-place-attribution elemento é usado para mostrar configurações gerais de atribuição de dados da API Maps como a origem de uma foto ou avaliação. Os atributos light-scheme-color e dark-scheme-color são usados para definir a cor do texto de atribuição no modo claro e escuro.

Consulte a documentação de referência de personalização de conteúdo do widget de lugar para mais informações sobre todos os elementos de conteúdo com suporte.

Para simplificar, você também pode usar gmp-place-all-content para mostrar todos os detalhes disponíveis no elemento Advanced Place Details ou com gmp-place-standard-content para mostrar uma configuração padrão.

Configurar a aparência

O intervalo de largura recomendado para o gmp-advanced-place-details elemento é de 250 a 400 pixels. Larguras menores que 250 pixels podem não ser mostradas corretamente. Defina a altura de acordo com seu aplicativo. O elemento Advanced Place Details foi projetado para rolar no espaço alocado conforme necessário.

O elemento gmp-advanced-place-details também oferece suporte a uma variedade de propriedades CSS personalizadas para configurar as cores e fontes do elemento. Consulte Estilo personalizado do kit de interface do Places para mais detalhes.

Elemento Advanced Place Details Compact (pré-lançamento)

Clique em um marcador no mapa para conferir os detalhes do lugar em um elemento Advanced Place Details Compact.

O AdvancedPlaceDetailsCompactElement mostra detalhes de um lugar selecionado usando o mínimo de espaço. Isso pode ser útil em uma janela de informações que destaca um lugar em um mapa, em uma experiência de mídia social como compartilhar um local em um chat, como uma sugestão para selecionar seu local atual ou em um artigo de mídia para referenciar o lugar no Google Maps. O AdvancedPlaceDetailsCompactElement pode mostrar nome, endereço, classificação, tipo, preço, ícone de acessibilidade, status aberto e uma única foto. Ele pode ser mostrado na horizontal ou vertical, conforme selecionado pelo orientation atributo.

No snippet a seguir, gmp-advanced-place-details-compact está configurado com orientation definido como horizontal. Um atributo adicional atributo, truncation-preferred, trunca determinado conteúdo para caber em uma linha em vez de quebrar. O gmp-advanced-place-details-compact elemento contém um elemento filho, gmp-place-details-place-request, para selecionar o lugar. Ele pode ser um objeto Place, um ID de lugar, ou um nome de recurso de lugar. 

  <gmp-advanced-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-advanced-place-details-compact>

Configurar o conteúdo

É possível controlar o conteúdo específico do lugar mostrado pelo gmp-advanced-place-details-compact elemento aninhando elementos filhos para selecionar e configurar os detalhes do lugar, conforme mostrado neste snippet: 

<gmp-advanced-place-details-compact>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-photo></gmp-place-photo>
    <gmp-place-name></gmp-place-name>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-address></gmp-place-address>
    <gmp-place-opening-hours></gmp-place-opening-hours>
    <gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details-compact>

Cada elemento de conteúdo filho seleciona um detalhe de lugar correspondente para mostrar. A ordem dos elementos filhos é irrelevante, já que os detalhes selecionados são sempre renderizados em uma ordem predefinida fixa. Alguns desses elementos podem ser configurados ainda mais usando atributos específicos do conteúdo.

Consulte a documentação de referência de personalização de conteúdo do widget de lugar para mais informações sobre todos os elementos de conteúdo com suporte.

Para simplificar, você também pode usar gmp-place-all-content para mostrar todos os detalhes disponíveis no elemento Advanced Place Details Compact ou com gmp-place-standard-content para mostrar uma configuração padrão.

Configurar a aparência

O intervalo de largura recomendado para o gmp-advanced-place-details-compact elemento na orientação vertical é de 180 a 300 pixels. Larguras menores que 160 pixels podem não ser mostradas corretamente. Não defina uma altura fixa.

O intervalo de largura recomendado para o gmp-advanced-place-details-compact elemento na orientação horizontal é de 180 a 500 pixels. Larguras menores que 160 pixels podem não ser mostradas corretamente. Em larguras menores que 350 pixels, a imagem em miniatura não será mostrada. Não defina uma altura fixa.

O elemento gmp-advanced-place-details-compact também oferece suporte a várias propriedades CSS personalizadas para configurar as cores e fontes do elemento. Consulte Estilo personalizado do kit de interface do Places para mais detalhes.

Note que se o elemento Advanced Place Details Compact for adicionado a uma janela de informações, o estilo personalizado precisará ser aplicado diretamente ao gmp-advanced-place-details-compact elemento. Isso ocorre porque a janela de informações faz parte do DOM sombreado do mapa, então os estilos CSS externos não serão aplicados. 

gmp-advanced-place-details-compact {
  --gmp-color-surface: #202124;
  --gmp-color-on-surface: #ffffff;
  --gmp-color-on-surface-variant: #9aa0a6;
  --gmp-color-primary: #8ab4f8;
  --gmp-font-family: "Roboto", sans-serif;
}

Este exemplo demonstra como adicionar um AdvancedPlaceDetailsCompactElement a um mapa de modo programático usando um InfoWindow e um AdvancedMarkerElement.

Recursos avançados

Personalizar botões de ação

Adicione botões de ação como filhos diretos do componente Advanced Place Details Use <gmp-place-link> para conexões de navegação padrão e especifique explicitamente o atributo action. Opcionalmente, você pode especificar o atributo slot. As ações predefinidas válidas são open-website, open-directions, open-map, e call. Se o atributo slot for omitido, ele será definido como action-main por padrão. 

<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <!-- Other content items -->
  <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
  <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</gmp-advanced-place-details-compact>

Requisitos de atribuição visual

Importante:você precisa deixar claro para os usuários finais quando um botão de ação personalizado compartilhar informações do usuário com um terceiro que não seja o Google. Consulte os requisitos de atribuição visual.

Omitir o nome do lugar

Para omitir o nome do lugar, exclua explicitamente o <gmp-place-name> elemento do seu conteúdo personalizado. 

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <!-- Exclude <gmp-place-name> to hide the place name -->
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-address></gmp-place-address>
</gmp-advanced-place-details>

Filtrar avaliações e mídias

Este exemplo de código mostra apenas mídias e avaliações que mencionam "café".

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <gmp-place-media query="coffee"></gmp-place-media>
  <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</gmp-advanced-place-details>

Você também pode usar JavaScript para recuperar o número total de itens que correspondem à consulta de pesquisa fornecida lendo as searchMediaCount e searchReviewsCount propriedades. Aguarde o evento gmp-load antes de acessar essas propriedades. 

const detailsElement = document.querySelector('gmp-advanced-place-details');
const mediaElement = detailsElement.querySelector('gmp-place-media');
mediaElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching photos: ', e.target.searchMediaCount);
});

const reviewsElement = detailsElement.querySelector('gmp-place-reviews');
reviewsElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching reviews: ', e.target.searchReviewsCount);
});