Tribo do C.I.

Só mais um blog de informática (só que não)

Formulário com GeoLocalização

julho 24th, 2014

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 =)

Sobre Sheldon Led:
Desenvolvedor e palestrante desde 2009. Já trabalhou com sistemas legados e software de gestão, mas hoje atua somente com web. Já participou do desenvolvimento de alguns portais governamentais e sites utilizando a plataforma Joomla e WordPress. Apesar de ser um desenvolvedor full-stack, tem focado seus estudos em tecnologias front-end e busca apoiar e colaborar em projetos envolvendo Software Livre, seja em eventos, material para estudo ou contribuição de código.
  • Giovanna Massoco Ticianelli

    Olá, precisaria deste recurso de geolocalização em um formulário que estou elaborando no google Forms (para um projeto da faculdade) e não compreendi como utiliza-lo no formulário. Teria como explicar?
    Obrigada.

  • http://www.sheldonled.com/ Sheldon Led

    Olá, esse recurso de Geolocalização é feito via programação. Até onde pesquisei não achei esse recurso disponível para formulários do Google.

Tribo do C.I.

Tribo do C.I.

Só mais um blog de informática (só que não)