Leitor de bairro residencial

Neste exemplo, adicionamos uma barra de pesquisa de endereços do Place Autocomplete para que o usuário insira um endereço e conheça as comodidades na região. O placeTypePreferences para usuários residenciais é definido como tipos geralmente associados à vida pessoal. Os endereços no exemplo estão restritos aos Estados Unidos.

Entender o código

Ajustar a frequência dos tipos de lugar

Ao especificar tipos de lugar para a Biblioteca do Contexto local retornar, você pode atribuir um peso relativo a cada propriedade usando o atributo weight. Os tipos com ponderação relativa mais alta aparecem com mais frequência. Neste exemplo, definimos uma frequência maior de parques e escolas, se disponíveis.

TypeScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

JavaScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

Place Autocomplete

Para usar o serviço Place Autocomplete, primeiro carregue a biblioteca Places da API Maps JavaScript. Na documentação do Autocomplete, são detalhados todos os parâmetros disponíveis para personalizar o comportamento do Place Autocomplete, como filtrar previsões por geografia ou tipo de lugar.

  1. Ative a API Places para o projeto.
  2. Carregue a biblioteca Places da API JavaScript e a Biblioteca do Contexto local.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext,places&v=beta&callback=initMap">
</script>

  1. Siga a documentação do Autocomplete e os exemplos de código para aprender a adicionar uma barra de pesquisa do Place Autocomplete ao seu site ou mapa. Neste exemplo, as linhas relevantes são:

TypeScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input")! as HTMLInputElement;
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

JavaScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input");
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

Testar amostra