Resulta que los navegadores más modernos implementan geolocation, dentro del objeto navigator de Javascript, que es capaz de averiguar, de forma transparente, dónde se encuentra el navegador, en función de redes wifi, IP de salida a internet y una serie de cosas que lo hacen mágico, porque la precisión asusta.
Esta funcionalidad viene de serie en Chrome y en Firefox > 3.6, aunque proporcionan información ligeramente distinta:
- Chrome devuelve un objeto bastante sencillo, que incluye longitud y latitud, a partir del cual es posible obtener la dirección exacta haciendo una consulta a Google Maps API a través de la función codeLatLng, que devuelve una estructura de datos similar a la que proporciona Firefox
- Firefox, además de eso, incluye un atributo address, que incluye calle, número, barrio, población, provincia, comunidad autónoma y país.
Pinchando aquí carga un ejemplo que demuestra el funcionamiento. Internet Explorer, abstenerse.
Incluyo un código de ejemplo:
Incluyo un código de ejemplo:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" >
//Address is printed in a friendly way
function updateContent(address){
p2 = document.getElementById("p2");
p2.innerHTML = "<p>You are at "+address.street+", "+
address.streetNumber+", "+address.city+", "+
address.region+", "+address.country+"</p>";
}
//This function invokes google maps api for getting address for given position
//and returns an object similar to the one returned by firefox
function codeLatLng(lat, lng) {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
address = {
street: "",
streetNumber: "",
city: "",
region: "",
country: ""
};
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
address = {
street: results[0].address_components[1].long_name,
streetNumber: results[0].address_components[0].long_name,
city: results[0].address_components[2].long_name,
region: results[0].address_components[3].long_name,
country: results[0].address_components[5].long_name
};
}
}
updateContent(address);
});
}
//print position
function displayPosition(position) {
p1 = document.getElementById("p1");
p1.innerHTML = "<table border='1'><tr><th>Timestamp</th><td>"+ position.timestamp +
"<tr><th>Latitude (WGS84)</th><td>" + position.coords.latitude + " deg</td></tr>" +
"<tr><th>Longitude (WGS84)</th><td>" + position.coords.longitude + " deg</td></tr></table>";
//alert("Position: "+position.coords.latitude+", "+position.coords.longitude);
var address = null;
if(!position.address){
//No address is available, so call to Google Maps API has to be made
codeLatLng(position.coords.latitude, position.coords.longitude);
}else{
updateContent(position.address);
}
}
function displayError(positionError) {
alert("Unable to get Position :(")
}
//main code
try {
if(typeof(navigator.geolocation) == 'undefined'){
gl = google.gears.factory.create('beta.geolocation');
} else {
gl = navigator.geolocation;
}
}catch(e){}
if (gl) {
gl.getCurrentPosition(displayPosition, displayError);
} else {
alert("I'm sorry, but geolocation services are not supported by your browser.");
}
</script>
</head>
<body>
<div id="p1"></div>
<div id="p2"></div>
</body>
</html>
Tengo el vago recuerdo haber trasteado con esto en Zoowa con php y un paquete instalado en servidor. Si yo lo entendí tenía que ser fácil ;)
ResponderSuprimirPor cierto el código se lee muy mal con ese estilo :P
Creo que lo que tú hacías era intentar localizar por IP. Esto es en el lado del cliente.
ResponderSuprimirEl código era la única forma de que saliera bien indentado y sin romperse las lineas. Puedes copiar-pegar y cambiar el tamaño :P
me puedes ayudar a poder guardar la data y ponerla en una base de datos?
ResponderSuprimir