2 de dezembro de 2010

Localização do usuário via Geo IP

Por Breno Leonardo

Visualizando a localização de usuário via GEO IP

Bem, quem nunca durante uma visita à blogs de downloads diversos nunca se deparou com aqueles pop-up’s onde são mostrados perfis de usuários com foto e que residem em nossa cidade, geralmente são pop-up’s de sites de relacionamento, enfim, a princípio achamos estranha a possibilidade de um site de outro país nos mostrar usuários de nossa cidade, chega claro, à ser duvidoso, acontece que é possível saber a localização geográfica através do IP.
Neste exemplo vamos mostrar a localização lado cliente.

sc
Localização Geográfica via IP (Geo IP)

Existem diversas API’s disponíveis na internet para realizarmos esse procedimento, irei mostra uma delas.

O código é muito simples, observe abaixo:

[sourcecode language=”javascript”]
<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
<script>
(function(){

var info = document.getElementById(‘info’);
var lat = geoip_latitude();
var lon = geoip_longitude();
var city = geoip_city();
var out = ‘<h3>Informações para seu IP</h3>’+
‘<ul>’+
‘<li>Latitude: ‘ + lat + ‘</li>’+
‘<li>Longitude: ‘ + lon + ‘</li>’+
‘<li>Cidade: ‘ + city + ‘</li>’+
‘<li>Cód. Região: ‘ + geoip_region() + ‘</li>’+
‘<li>Região: ‘ + geoip_region_name() + ‘</li>’+
‘<li>Código do País: ‘ + geoip_country_code() + ‘</li>’+
‘<li>Nome do País: ‘ + geoip_country_name() + ‘</li>’+
‘</ul>’;
info.innerHTML = out;
var url = ‘http://maps.google.com/maps/api/staticmap?center=’+
lat+’,’+lon+’&sensor=false&size=300×300&maptype=roadmap&key=’+
‘ABQIAAAAijZqBZcz-rowoXZC1tt9iRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQQBCa’+
‘F1R_k1GBJV5uDLhAKaTePyQ&markers=color:blue|label:I|’+lat+
‘,’+lon+’6&visible=’+lat+’,’+lon+’|’+(+lat+1)+’,’+(+lon+1);
var map = document.getElementById(‘map’);
map.innerHTML = ‘<img src="’+url+’" alt="’+city+’">’;

})();
</script>
[/sourcecode]

Tente visualizar seus dados geográficos neste exemplo.
Neste caso o download do exemplo consiste apenas em você visualizar o código-fonte do exemplo e salva-lo, uma vez que é puro html/css/js.
API: http://j.maxmind.com

Até a próxima.

Fonte: Rafael Clares