Geolocalização com HTML5

Há algum tempo estava namorando as novidades do HTML5 e uma que me chamou bastante a atenção foi aAPI de Geolocalização, com ela é possível achar a localização do usuário. Com essa funcionalidade é possível oferecer conteúdos personalizados e específicos dependendo da região do usuário de uma maneira simples.

Os principais browsers já suportam a geolocalização:

· Chrome

· Firefox

· Internet Explorer 9

· Opera

· Safari

Destacando que em dispositivos móveis a geolocalização é muito mais precisa.

Como isso pode comprometer a privacidade do usuário, a posição não está disponível a menos que o usuário aprove.

Então, mãos a obra, primeiramente devemos descobrir se o browser tem suporte a essa tecnologia, faremos isso através do seguinte trecho de código:

if (navigator.geolocation) {

// tem suporte

}

O método para recuperar a posição do usuário é esse getCurrentPosition(), ele tem três parâmetros:

1. Success callback: função que será executada depois da posição ser determinada;

2. Error Callback: função que pode reage aos erros, caso a posição não for determinada;

3. Options: Objeto (pares/valores) que influenciam na forma como a posição é determinada.

De acordo com a especificação, os dois últimos são argumentos opcionais, o success callback sempre tem que ser especificado.

navigator.geolocation.getCurrentPosition(showPosition, handleError);

function showPosition(position) {

var lat = position.coords.latitude;

var lon = position.coords.longitude;

alert(“Latitude: ” + lat + “\nLongitude: ”+ lon);

}

O getCurrentPosition() retorna um objeto caso ocorra tudo certo. As propriedades latitude, longitude, accuracy são sempre retornadas. As outras propriedades são devolvidas apenas caso disponível, abaixo uma tabela com todas as propriedades disponíveis até agora:

Propriedade	Descrição
coords.latitude	A latitude como um número decimal
coords.longitude	A longitude como um número decimal
coords.accuracy	A precisão da posição
coords.altitude	A altitude em metros acima do nível médio do mar
coords.altitudeAccuracy	A precisão da posição de altitude
coords.heading	A posição de graus em sentido horário a partir do Norte
coords.speed	A velocidade em metros por segundo
timestamp	A data e hora da resposta

Agora um código completo para mostrar o mapa da posição e o endereço através de uma busca no google maps:

<!DOCTYPE html>

<html>

<head>

var geocoder;

if (navigator.geolocation) {

geocoder = new google.maps.Geocoder();

navigator.geolocation.getCurrentPosition(showPosition, handleError);

}

function showPosition(position) {

showMap(position);

showAddress(position);

}

function showMap(position){

var latlon = position.coords.latitude + "," + position.coords.longitude;

var imgUrl = "http://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false";

$("#map").html("<img src='" + imgUrl + "'>");

}

function showAddress(position){

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var city = "";

var state = "";

var postalCode = "";

geocoder.geocode({ 'latLng': latlng }, function (results, status) {

if (status == google.maps.GeocoderStatus.OK) {

if (results[1]) {

for (var i = 0; i < results[0].address_components.length; i++) {

for (var b = 0; b < results[0].address_components[i].types.length; b++) {

if (results[0].address_components[i].types[b] == "administrative_area_level_1") {

state = results[0].address_components[i];

}

if (results[0].address_components[i].types[b] == "locality") {

city = results[0].address_components[i];

}

if (results[0].address_components[i].types[b] == "postal_code") {

postalCode = results[0].address_components[i];

}

var state = state.short_name;

var city = city.short_name;

var zip = postalCode.short_name;

$("#address").html(city + ", " + state + " " + zip);

}

});

}

function handleError(error) {

switch(error.code)

{

case error.PERMISSION_DENIED:

alert("Usuário negou o pedido de Geolocalização.");

break;

case error.POSITION_UNAVAILABLE:

alert("Informações sobre a localização está indisponível.");

break;

case error.TIMEOUT:

alert("O pedido para obter a localização do usuário expirou.");

break;

case error.UNKNOWN_ERROR:

alert("Ocorreu um erro desconhecido.");

break;

}

</script>

</head>

<body>

</body>

</html>

Explicações:

Na linha 4 utilizamos um canal CDN (Content Delivery Network) para adicionar o framework javascript jQuery.

Nas linhas 5 e 21 efetuamos uma consulta ao google maps o parâmetro GET sensor é utilizado para informar se a consulta e feita a partir de um dispositivo móvel ou não.

Na linha 7 declaramos uma variável global para a API de geocodificação do Google (nesse caso geocodificação reversa).

Na linha 9 verificamos se o browser tem suporte a geolocalização.

Na linha 10 inicializamos a API do Google.

Na linha 11 invocamos o método da API do HTML5 para recuperar a posição do usuário.

Na linha 14 temos a função que será invocada se tivermos êxito na consulta.

Na linha 19 recuperamos os valores da latitude e longitude e criamos uma imagem com o caminho para a API do Google que fará um mapa estático.

Na linha 26 temos um método que recupera o estado, cidade e CEP para mostra-los na tela.

Na linha 56 temos a função que será invocada se tivermos algum erro.

Além dessa função, também podemos monitorar a posição do usuário, fazendo repetidas requisições, através do método watchPosition(), mas isso já é assunto para outros post.