Com os dispositivos móveis tomando conta do mercado, se faz necessário para vários tipos de aplicações saberem qual a posição do usuário para fornecer informações mais personalizadas e relevante. Com o HTML5 foi introduzido a possibilidade de pegar a posição GPS do usuário que pode ser feito de maneira muito fácil.

function getLocation(){
			
	var saida = document.getElementById("saida");
	if( navigator.geolocation ){
		navigator.geolocation.getCurrentPosition(function(position){
			lat = position.coords.latitude;
			lng = position.coords.longitude;
			saida.innerHTML = "Latitude: "+lat+" - Longitude: "+lng;
		});
	}else{
		saida.innerHTML = "Geolocalização não é suportado por este navegador!";
	}
}

Veja exemplo simples de Geolocalização

Na linha 3 simplesmente pegamos um elemento HTML para realizar a saída para o usuário.

Na linha 4 realizamos um teste para saber se o navegador possui suporte ao recurso de geolocalização, senão mostramos a devida mensagem no else do teste.

Na linha 5 chamamos o método getCurrentPosition do objeto navigator.geolocation que recebe como parâmetro uma função que será chamada quando a posição de GPS for obtida sendo os dados passado em seu parâmetro position.

Nas linhas 6 e 7, pegamos os valores de latitude e longitude do objeto position que recebemos e na próxima linha exibimos este resultado para o usuário.

Agora vamos examinar os possíveis erros que podem ocorrer.

function getLocation(){
			
	var saida = document.getElementById("saida");
	if( navigator.geolocation ){
		navigator.geolocation.getCurrentPosition( showSucesso , showErro);
	}else{
		saida.innerHTML = "Geolocalização não é suportado por este navegador!";
	}
}

...

function showErro(erro){
	var saida = document.getElementById("saida");
	
	switch( erro.code ){
		case erro.PERMISSION_DENIED:
			saida.innerHTML = "O usuário negou o pedido de Geolocalização";
			break;
		case erro.POSITION_UNAVAILABLE:
			saida.innerHTML = "A posição não está disponível";
			break;
		case erro.TIMEOUT:
			saida.innerHTML = "O pedido para obter a localização do usuário expirou";
			break;
		case erro.UNKNOWN_ERROR:
			saida.innerHTML = "Um erro desconhecido ocorreu";
			break;
	}
}

Veja exemplo com tratamento de erros

Como vemos na linha 5, agora o método getCurrentPosition recebe duas funções como parâmetro, a primeira será executada se for possível obter uma posição e a segunda caso não seja, passando um objeto de erro para ela. Na linha 13 temos a nossa implementação do método de erro showErro que recebe o objeto erro, que entre seus atributos possui o código de erro, que podemos através de um switch na linha 16 comparar com as constantes PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT e UNKNOWN_ERROR que as suas descrição já se encontram no código.

Voltando um pouco para o objeto de position possui mais informações além de latitude e longitude conforme tabela abaixo:

function showSucesso(position){
	var saida = document.getElementById("saida");
	saida.innerHTML += "<p>Latitude: "+position.coords.latitude+"</p>"
	saida.innerHTML += "<p>Longitude: "+position.coords.longitude+"</p>";
	saida.innerHTML += "<p>Accuracy: "+position.coords.accuracy+"</p>";
	saida.innerHTML += "<p>AltitudeAccuracy: "+position.coords.altitudeAccuracy+"</p>";
	saida.innerHTML += "<p>Heading: "+position.coords.heading+"</p>";
	saida.innerHTML += "<p>Speed: "+position.coords.speed+"</p>";
	saida.innerHTML += "<p>Timestamp: "+position.timestamp+"</p>";	
}

Veja exemplo

Algo que podemos fazer com as informações que obtemos é utilizar a API do Google Maps para gerar uma imagem estática por exemplo, marcando onde o usuário está.

function showSucesso(position) {
	var latlon = position.coords.latitude + "," + position.coords.longitude;
	var marker = "color:blue%7C"+latlon;
	var img_url = "http://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center="+latlon+"&markers="+marker+"&zoom=14&size=400x300&sensor=false";

	document.getElementById("saida").innerHTML = "<img src='http://www.botecodigital.info/"+img_url+"'>";
}

Exemplo com Mapa

O método não é muito diferente, neste caso é só construir uma URL para o serviço de Mapas estático http://maps.googleapis.com/maps/api/staticmap com os parâmetros:

maptype: tipo de mapa
center: posição em que o mapa irá ser ser centralizado
markers: marcadores que serão adicionados no mapa, formados por color:%7Czoom: nível de zoom, 1 para o minimo e entre 16 e 20 para máximo dependendo da região
size: tamanho da imagem a ser gerada

Para maiores detalhes de parâmetros consulte a documentação do Google maps .

OBSERVAÇÃO IMPORTANTE: Em navegadores desktop os métodos podem não funcionar gerando o o erro no console do “getCurrentPosition() and watchPosition() are deprecated on insecure origins.” pois atualmente é exigido que os métodos que forneçam informações sensíveis devem ser feitos por HTTPS. Mas testei no navegador mobile e os códigos funcionaram sem HTTPS.

Bom era isso T++