Elementos do Place Details

Selecione a plataforma: Android iOS JavaScript

Selecione o componente certo para seu caso de uso:

• O elemento Place Details mostra detalhes como horário de funcionamento, site e avaliações de um lugar selecionado. Ele é faturado no nível Essentials.
• O elemento Advanced Place Details (pré-lançamento) estende o elemento Place Details, permitindo configurar botões de ação e aplicar opções de pesquisa e filtragem a avaliações e mídias. Ele é faturado no nível Pro.

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

• O PlaceDetailsElement oferece suporte a todos os dados de lugar visualizáveis e pode incluir várias fotos.
• O PlaceDetailsCompactElement foi projetado para consumir o mínimo de espaço e mostrar um conjunto conciso de informações sobre um lugar, incluindo nome, endereço, classificação etc. Ele pode também incluir uma única foto.

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

Elemento Place Details

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

O PlaceDetailsElement 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-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-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Dica: você pode encontrar o ID de um lugar específico usando o localizador de ID de lugar.

Configurar o conteúdo

É possível controlar o conteúdo específico do lugar mostrado pelo gmp-place-details elemento usando um elemento gmp-place-content-config aninhado para selecionar e configurar os detalhes do lugar, conforme mostrado neste exemplo:

        <gmp-place-details>
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <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-content-config>
        </gmp-place-details>

O elemento gmp-place-content-config contém vários elementos de conteúdo filho, e cada um 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 a origem da foto. 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 PlaceContentConfigElement documentação de referência para mais informações sobre todos os elementos de conteúdo com suporte.

Para simplificar, o gmp-place-content-config elemento pode ser substituído por gmp-place-all-content para mostrar todos os detalhes disponíveis no elemento Place Details ou por gmp-place-standard-content para mostrar uma configuração padrão.

Configurar a aparência

O intervalo de largura recomendado para o gmp-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 Place Details foi projetado para rolar dentro do espaço alocado conforme necessário.

O elemento gmp-place-details 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.

Importante: ao fazer modificações visuais, você precisa seguir os requisitos de atribuição.

Confira o exemplo completo de código.

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');

async function init() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });

    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        marker.position = null;
        event.stop();
        if ('placeId' in event && event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        } else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}

void init();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}
style.css

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <gmp-place-details>
                    <gmp-place-details-place-request
                        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                    <gmp-place-content-config>
                        <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-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>
index.html

Elemento Place Details Compact

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

O PlaceDetailsCompactElement 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 PlaceDetailsCompactElement pode mostrar nome, endereço, classificação, tipo, preço, ícone de acessibilidade, status aberto e uma única foto. Ele pode ser mostrado horizontal ou verticalmente, conforme selecionado pelo orientation atributo.

No snippet a seguir, gmp-place-details-compact está configurado com orientation definido como horizontal. Um atributo adicional, truncation-preferred, trunca determinado conteúdo para caber em uma linha em vez de quebrar. O gmp-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-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-place-details-compact>

Dica: você pode encontrar o ID de um lugar específico usando o localizador de ID de lugar.

Configurar o conteúdo

É possível controlar o conteúdo específico do lugar mostrado pelo gmp-place-details-compact elemento usando um elemento gmp-place-content-config aninhado para selecionar e configurar os detalhes do lugar, conforme mostrado neste snippet:

<gmp-place-content-config>
    <gmp-place-media lightbox-preferred></gmp-place-media>
    <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-open-now-status></gmp-place-open-now-status>
    <gmp-place-attribution
        light-scheme-color="gray"
        dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-content-config>
index.html

O elemento gmp-place-content-config contém vários elementos de conteúdo filho, e cada um 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 PlaceContentConfigElement documentação de referência para mais informações sobre todos os elementos de conteúdo com suporte.

Para simplificar, o gmp-place-content-config elemento pode ser substituído por gmp-place-all-content para mostrar todos os detalhes disponíveis no elemento Place Details Compact ou por gmp-place-standard-content para mostrar uma configuração padrão.

Configurar a aparência

O intervalo de largura recomendado para o gmp-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 a altura fixa.

O intervalo de largura recomendado para o gmp-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 a altura fixa.

O elemento gmp-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.

Importante: ao fazer modificações visuais, você precisa seguir os requisitos de atribuição.

Observação: se o elemento Place Details Compact for adicionado a uma janela de informações, o estilo personalizado precisará ser aplicado diretamente ao gmp-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-place-details-compact
    orientation="horizontal"
    truncation-preferred
    style="
        width: 400px;
        padding: 0;
        margin: 0;
        border: none;
        background-color: transparent;
        color-scheme: light;
    ">
    <gmp-place-details-place-request
        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
index.html

Confira um exemplo completo de código

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details-compact');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');
async function init() {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        event.stop();

        if ('placeId' in event) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            console.log('No place was selected.');
        }
    });
}
void init();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}
style.css

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details Compact with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
        </div>
        <!--
        The gmp-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <gmp-place-media lightbox-preferred></gmp-place-media>
                <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-open-now-status></gmp-place-open-now-status>
                <gmp-place-attribution
                    light-scheme-color="gray"
                    dark-scheme-color="white"></gmp-place-attribution>
            </gmp-place-content-config>
        </gmp-place-details-compact>
    </body>
</html>
index.html