Visualizador de barrios residenciales

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

En este ejemplo, agregamos una barra de búsqueda de direcciones de Place Autocomplete que permite que el usuario ingrese una dirección y evalúe los servicios cercanos. Para los usuarios residenciales, establecemos el atributo placeTypePreferences para los tipos que se suelen asociar con la vida personal. Las direcciones de esta muestra están restringidas a Estados Unidos.

Comprende el código

Cómo ajustar la frecuencia con que se muestran los tipos de lugares

Cuando especificas los tipos de lugares que deseas que muestre la Biblioteca de Contexto local, puedes asignar un peso relativo a cada propiedad mediante el atributo weight (los tipos con un peso relativo más alto aparecerán con mayor frecuencia). En este ejemplo, se especifica una mayor frecuencia para los parques y las escuelas (si están disponibles).

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 utilizar el servicio Place Autocomplete, primero debes cargar la biblioteca de Places de la API de Maps JavaScript. En la documentación de Autocomplete, se detallan todos los parámetros disponibles para personalizar el comportamiento de Place Autocomplete, como las predicciones de filtros por área geográfica o tipo de lugar.

  1. Habilita la API de Places para tu proyecto.
  2. Carga la Biblioteca de Places de la API de JavaScript y la Biblioteca de 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. Sigue los pasos que se indican en la documentación de Autocomplete y las muestras de código para obtener información sobre cómo agregar una barra de búsqueda de Place Autocomplete a tu sitio web o mapa. En este ejemplo, las líneas relevantes son las siguientes:

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);

Prueba la muestra