{{securecontext_header}}{{APIRef("Geolocation API")}}
La API de geolocalización permite al usuario compartir su ubicación a las aplicaciones web si así lo desea. Por razones de privacidad, al usuario se le pide que confirme el permiso para proporcionar información de ubicación.
La API de geolocalización se publica a través del objeto {{domxref("window.navigator.geolocation","navigator.geolocation")}}.
Si el objeto existe, los servicios de geolocalización están disponibles. Se puede comprobar la presencia de la geolocalización de esta manera:
if ("geolocation" in navigator) {
/* la geolocalización está disponible */
} else {
/* la geolocalización NO está disponible */
}
Para obtener la ubicación actual del usuario, puede llamar al método {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.
Esto inicia una solicitud asíncrona para detectar la posición del usuario, y consulta el hardware de posicionamiento para obtener información actualizada. Cuando se determina la posición, se ejecuta la función de callback. Si lo desea, puede proporcionar otra función de callback que se ejecuta si se produce un error. Un tercer parámetro opcional, es un objeto de opciones donde se puede establecer la edad máxima de la posición devuelta, el tiempo de espera para una solicitud y si se requiere una alta precisión para la posición.
Nota: Por defecto, {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} intenta responder tan rápido como sea posible con un resultado de baja precisión. Es útil cuando se necesita una respuesta rápida sin importar su exactitud. A los dispositivos con GPS, por ejemplo, les puede tomar más de un minuto obtener una posición, por lo que datos menos precisos (localización por IP o wifi) pueden ser devueltos por {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.
navigator.geolocation.getCurrentPosition(function(position) {
haz_algo(position.coords.latitude, position.coords.longitude);
});
En el ejemplo anterior la función do_something() será ejecutada una vez que se obtiene la posición.
Si los datos de ubicación cambian (si el dispositivo se mueve o información geográfica más precisa es recibida), puede definir una función de callback que se ejecuta al cambiar la posición. Esto se logra a través de la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}}, que recibe los mismos parámetros que {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. La función de callback es ejecutada varias veces, permitiendo al navegador actualizar la ubicación cada vez que cambia, o proporcionar una posición con mayor exactitud utilizando distintas técnicas de geolocalización. La función de callback de error, la cual es opcional como en {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}, es llamada solo una vez, cuando nunca serán devueltos resultados correctos.
Nota: Es posible usar la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} sin haber ejecutado antes {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.
var watchID = navigator.geolocation.watchPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});
El método {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} devuelve un número que se utiliza para identificar el rastreador de posición solicitado; este valor se utiliza junto con el método {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} para dejar de rastrear la posición del usuario.
navigator.geolocation.clearWatch(watchID);
Ambos métodos, {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} y {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} aceptan una función de callback en caso de éxito, una función callback opcional si ocurre algún error, y un objeto PositionOptions también opcional.
{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}
Una llamada a {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} luce como el siguiente ejemplo:
function geo_success(position) {
do_something(position.coords.latitude, position.coords.longitude);
}
function geo_error() {
alert("Sorry, no position available.");
}
var geo_options = {
enableHighAccuracy: true,
maximumAge : 30000,
timeout : 27000
};
var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
Demo de watchPosition: http://www.thedotproduct.org/experiments/geo/
La ubicación del usuario es descrita con un objeto Position referenciando a un objeto Coordinates.
{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}
{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}
La función de callback de error, si existe cuando se llama a getCurrentPosition() o watchPosition(), recibe un objeto PositionError como su primer parámetro.
function errorCallback(error) {
alert('ERROR(' + error.code + '): ' + error.message);
};
{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}
body {
padding: 20px;
background-color:#ffffc9
}
p { margin : 0; }
<p><button onclick="geoFindMe()">Show my location</button></p> <div id="out"></div>
function geoFindMe() {
var output = document.getElementById("out");
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
var img = new Image();
img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
output.appendChild(img);
};
function error() {
output.innerHTML = "Unable to retrieve your location";
};
output.innerHTML = "<p>Locating…</p>";
navigator.geolocation.getCurrentPosition(success, error);
}
{{ EmbedLiveSample('Geolocation_Live_Example',350,410) }}