A versão mais recente do HTML, em sua versão 5, oferece aos desenvolvedores algumas API – Application Programming Interface – muito interessantes. Uma delas é a API de Geolocalização que retorna as coordenadas de latitude e longitude referente à conexão do usuário.
Obviamente, esta localização não é precisa pois varia muito de acordo com provedor de Internet utilizado pelo usuário, mas ao menos serve para sabermos parcialmente de onde vêm os visitantes de nosso site. Isso pode ser muito útil para criarmos por exemplo uma segmentação de clientes.
Uma empresa que recebe muitas visitas do rio Grande do Sul por exemplo pode pensar em melhorar os canais de venda para esta região, ou até mesmo, montar uma filial lá.
O código a seguir demonstra como podemos utilizar esta API;
<!DOCTYPE html>
<html>
<body>
<p id="demo">Clique no botão para receber sua localização em Latitude e Longitude:</p>
<button onclick="getLocation()">Clique Aqui</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="O seu navegador não suporta Geolocalização.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Você deverá permitir que o navegador informe ao site sua localização;
Exibindo a geocalização em um mapa do Google Maps.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Clique no botão para obter sua localização:</p>
<button onclick="getLocation()">Clique aqui</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocalização não é suportada nesse browser.";}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"Você está Aqui!"});
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="Usuário rejeitou a solicitação de Geolocalização."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Localização indisponível."
break;
case error.TIMEOUT:
x.innerHTML="O tempo da requisição expirou."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Algum erro desconhecido aconteceu."
break;
}
}
</script>
</body>
</html>
O resultado será este: