Como fazer um campo de endereços auto-completo com a api do google maps?
Usando a API do Google Maps e o JQuery, gostaria de ter um campo de endereços que ao digitá-lo irá completar automaticamente o endereço aí indicado. Como conseguir isso?
6 answers
Below I split all the details of formatted address like City, State, Country and Zip code.
So when you start typing your street name and select any option then street name write over street field, city name write over city field and all other fields like state, country and zip code will fill automatically.
Using Google APIs.
------------------------------------------------
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var places = new google.maps.places.Autocomplete(document
.getElementById('txtPlaces'));
google.maps.event.addListener(places, 'place_changed', function() {
var place = places.getPlace();
var address = place.formatted_address;
var value = address.split(",");
count=value.length;
country=value[count-1];
state=value[count-2];
city=value[count-3];
var z=state.split(" ");
document.getElementById("selCountry").text = country;
var i =z.length;
document.getElementById("pstate").value = z[1];
if(i>2)
document.getElementById("pzcode").value = z[2];
document.getElementById("pCity").value = city;
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
var mesg = address;
document.getElementById("txtPlaces").value = mesg;
var lati = latitude;
document.getElementById("plati").value = lati;
var longi = longitude;
document.getElementById("plongi").value = longi;
});
});
À deriva um pouco, mas seria relativamente fácil preencher automaticamente a cidade/estado dos EUA ou a cidade de CA/Provence quando o utilizador entra no seu código postal usando uma tabela de procura.
Eis como poderias fazê-lo se pudesses forçar as pessoas a curvarem-se à tua vontade.-
O utilizador entra: código postal (zip)
Você preenche: estado, cidade (província, para o Canadá) {[[2]}
-
O Utilizador começa a introduzir: nome de rede
Tu: autofill
-
Você mostra: um intervalo de números de endereço permitidos
Utilizador: indica o número
-
O utilizador entra: Número de endereço
Tu: não faças nada
-
O Utilizador começa a indicar: nome da rua
Você: autofill, a partir de uma enorme lista de todas as ruas da país
-
O utilizador entra: city
Você: auto-preenchimento
-
O utilizador entra: state / provence
Vale a pena auto-encher alguns copos?
Você: autofill código postal (zip), se você puder (porque alguns códigos straddle cidades).
Agora sabes porque é que as pessoas cobram $ para fazer isto. :)
Para o endereço da rua, considere que existem duas partes: numérica e o nome da rua. Se você tem o Código Postal, então você pode restringir as ruas disponíveis, mas a maioria das pessoas entra na parte numérica primeiro, que é backwa
Eu realmente duvido disso--a API do google maps é óptima para geocodificar endereços conhecidos, mas geralmente devolve dados que são adequados para operações de auto-completação. Nevermind the challenge of not hitting the API in such a way as to eat up your geocoding query limit very quickly.
É fácil, mas os exemplos da API do Google dão-lhe uma explicação detalhada sobre como conseguir que o mapa mostre o local indicado. Para apenas completar automaticamente o recurso, você pode fazer algo assim.
Primeiro, active o serviço web da API do Google Places. Vai buscar a chave da API. Você terá que usá-lo na tag script no arquivo html.
<input type="text" id="location">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY_HERE]&libraries=places"></script>
<script src="javascripts/scripts.js"></scripts>
Usar o ficheiro do programa para carregar a classe de completação automática. Os vossos guiões.o ficheiro do js vai ser parecido com isto.
// scripts.js custom js file
$(document).ready(function () {
google.maps.event.addDomListener(window, 'load', initialize);
});
function initialize() {
var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(input);
}
Só uso presilha e JQuery.
Espero que seja útil.`https://jsfiddle.net/yacmed/yp0xmdf5/`