Last Updated: February 25, 2016
·
2.509K
· 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.

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside