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.
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
input {
height: 30px;
margin: 12px 0px;
padding: 10px;
width: 300px;
}
<html>
<head>
<title>Local Context Home</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<input id="input" placeholder="Enter a US address" />
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext,places&v=beta"
defer
></script>
</body>
</html>
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).
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.
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);