Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
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.
/*
* 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>
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.
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.
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);