Elemento de Place Search avançado (pré-lançamento)

O AdvancedPlaceSearchElement é um elemento HTML que renderiza os resultados de uma pesquisa de lugares em uma lista. Há duas maneiras de configurar o elemento gmp-advanced-place-search:

A pesquisa por perto e a pesquisa por texto oferecem os mesmos recursos avançados, incluindo a personalização de botões de ação, a filtragem de avaliações e mídias, a configuração da atribuição de lugares, e o tratamento de seleção e erros de lugares.

Solicitação de pesquisa por perto

Selecione um tipo de lugar no menu para conferir os resultados da pesquisa por perto para esse tipo de lugar.

A pesquisa por perto é configurada principalmente para pesquisar por tipo de lugar e local, e os resultados podem ser classificados por distância ou popularidade usando a rankPreference propriedade. Consulte a documentação de referência da classe PlaceNearbySearchRequestElement para mais detalhes.

Este exemplo renderiza o elemento de pesquisa avançada de lugares em resposta a uma pesquisa por perto com um tipo de lugar selecionado pelo usuário. Ele também mostra um AdvancedPlaceDetailsCompactElement para o lugar selecionado.

Para adicionar o elemento Advanced Place Search ao mapa, adicione um gmp-advanced-place-search elemento com um gmp-place-nearby-search-request elemento aninhado à página HTML. 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

O elemento select permite que o usuário escolha um tipo de lugar no menu. Para simplificar, apenas três tipos de lugares são listados: restaurante, café, e eletroposto. 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

Quando o usuário seleciona um tipo de lugar no menu, o gmp-place-nearby-search-request elemento é atualizado, e o elemento de Place Search avançada mostra os resultados.

Solicitação de pesquisa por texto

Insira um termo de pesquisa no campo de entrada e clique no botão Pesquisar para receber uma lista de lugares que correspondam ao termo.

A pesquisa por texto é configurada principalmente para pesquisar usando uma consulta de texto e local, e os resultados podem ser refinados por nível de preço, classificação e se estão abertos no momento. Os resultados também podem ser classificados por distância ou popularidade usando a rankPreference propriedade. Consulte a PlaceTextSearchRequestElement documentação de referência da classe para mais detalhes.

Este exemplo renderiza o elemento de Place Search avançada em resposta a uma entrada de texto do usuário. Ele também mostra um AdvancedPlaceDetailsCompactElement para o lugar selecionado.

Para adicionar o elemento Advanced Place Search ao mapa, adicione um gmp-advanced-place-search elemento com um gmp-place-text-search-request elemento aninhado à página HTML. 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

O elemento input permite que o usuário insira o texto de pesquisa. 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

Quando o usuário clica no botão Pesquisar, a função de pesquisa é executada, o elemento gmp-place-text-search-request é atualizado, e o elemento de Place Search avançada mostra os resultados.

Recursos avançados

Personalizar botões de ação

Adicione botões de ação como filhos dentro do <template slot="place-list-item"> elemento do componente de Place Search avançado. Use <gmp-place-link> para conexões de navegação padrão e especifique explicitamente o atributo action. Também é possível 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, o padrão será action-main. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-search>

Filtrar avaliações e mídias

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

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

Configurar a atribuição de lugares

Para configurar a atribuição visual, adicione um <gmp-place-attribution> elemento para mostrar as configurações gerais de atribuição de dados da API Maps, como a origem de uma foto ou avaliação. Ele precisa ser adicionado como um irmão direto do <template>. As atribuições colocadas dentro do elemento <template> serão ignoradas. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-search>

Tratar a seleção e os erros de lugares

Quando o atributo selectable está presente, é possível detectar o gmp-select evento para recuperar o lugar selecionado pelo usuário. Também é possível detectar o evento gmp-error para tratar normalmente os cenários em que os dados do lugar não são buscados. 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});