Obs: este artigo pode ser lido em inglês em: https://medium.com/@sheldonled/form-with-geolocation-7c9cc0936732
Todos os dias preenchemos algum formulário na internet, e sabemos o quão chato é! Por exemplo, porque sempre temos que preencher informações de endereço? Porque o computador não simplesmente “tem” minha localização Deus sabe como? Bom, com HTML5 GeoLocation a experiência do usuário pode ficar bem melhor. Através do HTML5 Geolocation temos as coordenadas geográficas, e através da API de Geocodificação Google conseguimos o restante da informação
Eu assisti a uma palestra sobre melhores práticas em Web Mobile, e aprendi que pode ser uma boa ideia preencher os dados de endereço do formulário usando geolocalização. Você pode aprender mais sobre HTML5 GeoLocation na MDN, e você vai ver que essa API só fornece as coordenadas geográficas. Você pode ver no Can I Use o suporte dos navegadores para GeoLocation, mas por questões de privacidade, no navegador do usuário aparecerá uma pergunta se ele permite fornecer sua localização, ou seja, o preenchimento automático vai depender do usuário.
Uma vez que você tem as coordenadas geográficas do usuário, você pode mandar uma requisição à API Google de Geocodificação, para pegar as informações reais, como cidade, estado e cep. Estas informações podem vir erradas, então é importante deixar o input editável. A URL da API Google que vamos usar é a Geocodificação Reversa, e é mais ou menos assim:
https://maps.googleapis.com/maps/api/geocode/json?latlng=<latitude>,<longitude>
A informações entre tags devem ser substituidas por números reais, tipo assim:
http://maps.googleapis.com/maps/api/geocode/json?latlng=37.4319075,-122.137884
Bom, “talk is cheap show me the code”, Eu fiz um exemplo prático de como você pode usar isso no seu formulário:
Agora, Eu só quero que todo mundo (até eu) comece a usar isso porque é uma boa melhoria e economiza tempo.
OBS: Por questões de segurança, as requisições estão sendo feitas apenas dentro de sites com HTTPS, portanto preste atenção à isso.
Outra coisa, por algum motivo que ainda não descobri porque, em algumas versões do Firefox o código no Codepen não funciona, mas você pode copiar o código e colocá-lo num arquivo para testar que eu imagino que dê tudo certo =)
