Last Updated: February 25, 2016
·
2.295K
· teonimesic

Campo de endereço com autocompletar usando google maps

Em muitos projetos que desenvolvo acaba sendo necessário criar um campo de endereço para o usuário preencher. Porém deixar que o usuário digite o endereço, além de propenso a erros de digitação, pode não gerar um endereço compatível com o google ao usar o serviço de geocoding para encontrar uma latitude e longitude. Um exemplo disso é o endereço cair em outra cidade ou rua de mesmo nome em outra localização.

Ao invés disso, uma forma muito elegamente e interativa é autocompletar o endereço conforme o usuário vai digitando, e mostrando a posição no mapa para que não haja dúvidas que o usuário escolheu o endereço certo. Veja o exemplo para visualizar a solução descrita.

Para atingir este objetivo, criei uma pequena biblioteca javascript ( que depende de jquery e jquery-ui, e google maps).

Seu uso é bastante simples, basta ter um elemento onde será criado o mapa (div ou similar), um input onde o usuário pode colocar o texto, e dois inputs (escondidos ou não) para armazenar a latitude e longitude encontrada. Após ter incluído as bibliotecas é só utilizar:

map = new AutocompleteMapGeocoder("#map-canvas", "#address", "#latitude", "#longitude", -23.548881, -46.638336);

informando os elementos a serem usados, e a latitude e longitude de onde o mapa deve começar centralizado.