Geolocalização com HTML 5

{lang: 'pt-BR'}

Obter a localização do usuário é uma tarefa especialmente útil para aplicações web, sobretudo as que irão rodar em dispositivos móveis. Felizmente a especificação do HTML 5 pensou nisso e criou uma API que fornece os dados que a gente precisa, de uma maneira relativamente simples.

Uma característica da especificação, é que ela não restringe qual será a origem da informação. Ou seja, em um dispositivo móvel, como um celular, seria possível obter a localização do usuário usando o GPS, a localização da antena de celular, informações da antena wi-fi, base dados de endereço IP etc. O browser irá tratar a origem destas informações e, provavelmente, irá passar essa responsabilidade para o sistema operacional.

Obter a localização de um usuário depende da autorização dele, portanto esta é uma tarefa assíncrona. Uma vez que nosso script solicita a localização, uma mensagem será exibida pedindo ao usuário a autorização para que aquele site tenha acesso às informações de posicionamento.

A localização do usuário é representada por uma coordenada, formada pela latitude e longitude. O objeto recebido como resultado é do tipo Position e possui um atributo do tipo Coordinates com uma série de informações:

  • latitude: Posicionamento horizontal no mapa
  • longitude: Posicionamento vertical no mapa
  • accutacy: precisão em metros das coordenadas de localização. Está sempre disponível.
  • altitude: altitude em metros em relação ao nível do mar
  • altitudeAccuracy: precisão em metros da altitude
  • heading: direção da viagem, definida em graus (0º, 360º), contando no sentido horário em relação ao norte geográfico.
  • speed: velocidade de terra do usuário em metros/segundo.

Se o valor da altitude, heading e speed não estiverem disponíveis, os atributos terão valor null.

Veja o codigo abaixo para obter a localização do usuário:

 function updateMap(position) {
      // Localização formada por longitude e latitude
      var lat = position.coords.latitude;
      var long = position.coords.longitude;
}

// Solicita a localização
navigator.geolocation.getCurrentPosition(updateMap);

É possível também observar a posição do usuário a medida que ela se altera:

<script>
function updateMap(position) {
  // Atualiza um mapa com a nova posição
}

// solicita a localização continuamente
var watchId = navigator.geolocation.watchPosition(scrollMap);

function btnStopMapClickHandler() {
     // cancela a requisição
    navigator.geolocation.clearWatch(watchId);
}
</script>

<button onclick="btnStopMapClickHandler()">Parar</button>

É possível ainda detectar quando o recurso de localização não está disponível, ou quando o usuário não permitiu que o seu script obtenha sua localização:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript"> 

	// Características default do mapa
	var mapOptions = {
		zoom: 8,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	var map;

	function updateMapPosition(position){
		var lat = position.coords.latitude;
		var lng = position.coords.longitude;

		// Centraliza o mapa na localização do usuário
		var point = new google.maps.LatLng(lat, lng);
		map.setCenter(point);

		// Adiciona um círculo referente à precisão da medida
		var circle = new google.maps.Circle({
			center: point,
			strokeColor: "#003399",
			strokeOpacity: 0.8,
			strokeWeight: 1,
			fillColor: "#003399",
			fillOpacity: 0.35,
			radius: position.coords.accuracy
		});
		circle.setMap(map);

		// Adiciona uma marca ao mapa
		var options = { position: point }
		var marker = new google.maps.Marker(options);
		marker.setMap(map);
	}

	function handleError(error){
		alert("Não foi possível sua localização");
	}

	this.onload=function(){
		// Cria um mapa do Google Maps
		map = new google.maps.Map(document.getElementById("geoMap"), mapOptions);
		// O browser é compatível com geolocalização?
		if (navigator.geolocation) {
			 // Solicita a localização do usuário
		  	 navigator.geolocation.getCurrentPosition(updateMapPosition, handleError);
		}
	}

</script> 

<div id="geoMap"></div>

Abaixo, um exemplo funcional da API de geolocalização do HTML 5 e o mapa do GoogleMaps:

{lang: 'pt-BR'}
  • Verowilson

    Gostaria de saber se posso colocar o scipt no meu site e se ele me envia as informações das visitas.
    Grato

  • João Vítor Carvalho

    Cara, eu consigo usar essa localização em cima de uma mapa salvo no meu Google Maps? Queria mostrar a loja mais próxima do usuário do site com um zoom que mostrasse o mapa do Brasil.

    Pode me dar uma dica de como fazer isso em cima de um mapa público?

    Tenho um site onde falo sobre WordPress também, se quiser visitar depois.

    Feliz 2012

  • Angelito M. Goulart

    Cara, show de bola! Não sabia que era tão facil assim fazer isto. Falta só o HTML 5 se popularizar e ja era 😉

    Abraço

    • Bhoyet

      nao finoucna!!! da erro syntax error, unexpected T_VARIABLE, expecting T_FUNCTION in test1.php on line 44line 44 e: $gmaps = new gMaps( ABQIAAAAx7fo1WMRXISKhQaLGEqrMNLPKtDveUrTsd4KnS8UxRs-9Bcd-zaFPHUT7g7LTIw3BdsOg’);

  • moroccan escorts in dubai

    É oneroso para encontrar pessoas educadas sobre este tema, no entanto, você parece que você percebe que você está falando! Graças

  • Lucas

    quando uso no meu pc sempre aparece que estou no rio porém estou no espirito santo! como resolvo isso ?