Elemento básico do Place Autocomplete

O BasicPlaceAutocompleteElement cria um campo de entrada de texto, oferece previsões de lugares em uma lista de seleção na interface e retorna um ID do lugar selecionado.

Ao contrário do PlaceAutocompleteElement, o elemento simplificado Basic Place Autocomplete limpa o campo de entrada quando um usuário seleciona uma previsão de lugar e também retorna um objeto Place que contém apenas o ID do lugar, em vez de um objeto PlacePrediction. Use esse ID de lugar com um elemento Detalhes do kit de interface do Places para receber mais detalhes do lugar.

Pré-requisitos

Para usar o elemento Basic Place Autocomplete, ative o "Kit de interface do usuário Places" no projeto do Google Cloud. Consulte o artigo Começar para mais detalhes.

Adicionar um elemento básico do Place Autocomplete

O elemento Basic Place Autocomplete cria um campo de entrada de texto, oferece previsões de lugares em uma lista de seleção na interface e retorna um ID de lugar em resposta à seleção de um usuário usando o evento gmp-select. Nesta seção, mostramos como adicionar um elemento de preenchimento automático básico a uma página da Web ou um mapa.

Adicionar um elemento de preenchimento automático básico a uma página da Web

Para adicionar o elemento BasicAutocomplete a uma página da Web, crie um google.maps.places.BasicPlaceAutocompleteElement e anexe-o à página, conforme mostrado no exemplo a seguir:

  // Request needed libraries.
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary('places');
// Create the input HTML element, and append it.
const placeAutocomplete = new BasicPlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);

Adicionar um elemento de preenchimento automático básico a um mapa

Para adicionar um elemento de preenchimento automático básico a um mapa, crie uma nova instância de BasicPlaceAutocompleteElement, anexe-a a um div e envie-a para o mapa como um controle personalizado, conforme mostrado no exemplo a seguir:

  const placeAutocomplete = new google.maps.places.BasicPlaceAutocompleteElement();
  placeAutocomplete.id = 'place-autocomplete-input';
  placeAutocomplete.locationBias = center;
  const card = document.getElementById('place-autocomplete-card');
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

Restringir previsões de preenchimento automático

Por padrão, o Place Autocomplete básico apresenta todos os tipos de lugares, favorecendo previsões perto da localização do usuário. Defina BasicPlaceAutocompleteElementOptions para mostrar previsões mais relevantes restringindo ou polarizando os resultados.

Quando você limita os resultados, o elemento de preenchimento automático básico ignora todos os resultados que estão fora da área de restrição. Uma prática comum é restringir os resultados aos limites do mapa. A polarização de resultados faz com que o elemento BasicAutocomplete mostre resultados dentro da área especificada, mas algumas correspondências podem estar fora dessa região.

Se você não fornecer limites ou uma janela de visualização de mapa, a API tentará detectar a localização do usuário pelo endereço IP e priorizará os resultados para esse local. Defina limites sempre que possível. Caso contrário, cada usuário pode receber uma previsão diferente. Além disso, para melhorar as previsões, é importante oferecer uma janela de visualização adequada (como aquelas que você define movimentando ou aumentando o zoom do mapa) ou definida pelo desenvolvedor com base no raio e no local do dispositivo. Quando um raio não está disponível, 5 km é considerado um padrão adequado para o elemento Basic Place Autocomplete. Não defina uma janela de visualização com raio zero (um único ponto), que tenha apenas alguns metros de extensão (menos de 100 m) ou que abranja todo o globo.

Restringir a pesquisa de lugares por país

Se quiser restringir a pesquisa de lugares a um ou mais países específicos, use a propriedade includedRegionCodes para definir os códigos dos países, como mostrado no snippet abaixo:

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

Restringir a pesquisa de lugares aos limites do mapa

Se quiser fazer isso, use a propriedade locationRestrictions para adicionar os limites, como mostrado no snippet abaixo:

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

Ao fazer a restrição, inclua um listener para atualizar os limites quando eles mudarem:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

Para remover locationRestriction, defina-o como null.

Polarizar os resultados da pesquisa de lugares

Polarize os resultados a uma área circular usando a propriedade locationBias e transmitindo um raio, como mostrado aqui:

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

Para remover locationBias, defina-o como null.

Restringir os resultados da pesquisa de lugares a determinados tipos

Para fazer isso, use a propriedade includedPrimaryTypes e especifique um ou mais tipos, como mostrado aqui:

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

Para conferir uma lista completa dos tipos aceitos, consulte Tabelas A e B de tipos de lugar.

Conferir detalhes sobre o lugar

Para consultar o ID do lugar selecionado, adicione um listener gmp-select a PlaceAutocompleteElement, como mostrado no exemplo abaixo:

// Add the gmp-select listener, and display the results.
  placeAutocomplete.addEventListener('gmp-select', async ({ place }) => {
      await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
      selectedPlaceTitle.textContent = 'Selected Place:';
      selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
  });
  

No exemplo anterior, o listener de eventos retorna um objeto da classe Place. Chame place.fetchFields() se quiser receber os campos de dados do Place Details necessários para seu aplicativo.

O listener do exemplo a seguir pede informações sobre o lugar e mostra tudo em um mapa.

  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener('gmp-select', async ({ place }) => {
      await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
      // If the place has a geometry, then present it on a map.
      if (place.viewport) {
          map.fitBounds(place.viewport);
      }
      else {
          map.setCenter(place.location);
          map.setZoom(17);
      }
      let content = '<div id="infowindow-content">' +
          '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
          '<span id="place-address">' + place.formattedAddress + '</span>' +
          '</div>';
      updateInfoWindow(content, place.location);
      marker.position = place.location;
  });
  

Neste exemplo, mostramos como adicionar um elemento de preenchimento automático básico a um mapa do Google.

JavaScript

const mapContainer = document.getElementById("map-container");
const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const detailsElement = document.querySelector('gmp-place-details-compact');
const mapElement = document.querySelector('gmp-map');
const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    //@ts-ignore
    const { BasicPlaceAutocompleteElement, PlaceDetailsElement } = await google.maps.importLibrary('places');
    //@ts-ignore
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
    //@ts-ignore
    const { LatLngBounds } = await google.maps.importLibrary('core');
    // Set the initial map location and autocomplete location bias
    mapElement.center = center;
    autocompleteElement.locationBias = center;
    // Get the underlying google.maps.Map object to add listeners
    const map = mapElement.innerMap;
    // Add the listener tochange locationBias to locationRestriction when the map moves
    map.addListener('bounds_changed', () => {
        autocompleteElement.locationBias = null;
        autocompleteElement.locationRestriction = map.getBounds();
        console.log("bias changed to restriction");
    });
    // Add the listener to update the Place Request element when the user selects a prediction
    autocompleteElement.addEventListener('gmp-select', async (event) => {
        const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Add the listener to update the marker when the Details element loads
    detailsElement.addEventListener('gmp-load', async () => {
        const location = detailsElement.place.location;
        detailsElement.style.display = "block";
        advancedMarkerElement.position = location;
        advancedMarkerElement.content = detailsElement;
        if (detailsElement.place.viewport) {
            map.fitBounds(detailsElement.place.viewport);
        }
        else {
            map.setCenter(location);
            map.setZoom(17);
        }
    });
}
initMap();
index.js

Observação:o JavaScript é compilado no snippet do TypeScript.

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 50px;
  top: 10px;
  left: 10px;
  z-index: 1;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
  border-radius: 10px;
}

gmp-place-details-compact {
  width: 360px;
  max-height: 300px;
  border: none;
  padding: 0;
  margin: 0;
  position: absolute;
  transform: translate(calc(-180px), calc(-215px)); 
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}
style.css

HTML

<html>
  <head>
    <title>Place Autocomplete map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
   <div id="map-container">
      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
      <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
      </gmp-place-details-compact>
      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
         <gmp-advanced-marker></gmp-advanced-marker> 
      </gmp-map>
    </div>

    <!-- prettier-ignore -->
    <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

Testar amostra

JSFiddle.net