15.1 Usando geolocalización
Obtener datos básicos de ubicación geográfica
Supón que deseas encontrar la ubicación del dispositivo de Internet del usuario.
Utiliza la nueva API de ubicación geográfica de HTML5 para obtener la ubicación del usuario cuando haga clic en un botón y muestre los valores a la página Web como se muestra en el siguiente ejemplo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title> Canvas </title>
<script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="Scripts/flot/jquery.flot.js"></script>
</head>
<body>
<input type="button" id="go" value="Haga click aquí para ver su ubicación" />
<script>
$(document).ready(function () {
//botón de cableado haga clic.
$('#go').click(function () {
//prueba la presencia de geolocalización.
if (navigator && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geo_success, geo_error);
} else {
error('La ubicación geográfica no es compatible.');
}
});
});
function geo_success(position) {
printLatLong(position.coords.latitude, position.coords.longitude);
}
//El objeto PositionError devuelto contiene los siguientes atributos:
//código: un código de respuesta numérica.
//0 - Desconocido
//1 - Permiso denegado
//2 - Posición no disponible
//3 - Tiempo de espera
// mensaje: Principalmente para la depuración. Se recomienda no mostrar este error a los usuarios.
function geo_error(err) {
if (err.code == 1) {
error('El usuario denegó la solicitud de información de ubicación.')
} else if (err.code == 2) {
error('La información de tu ubicación no está disponible.')
} else if (err.code == 3) {
error('La solicitud para obtener su ubicación se excedio de tiempo.')
} else {
error('Se produjo un error desconocido al solicitar tu ubicación.')
}
}
//Muestra la latitud y longitud
function printLatLong(lat, long) {
$('body').append('<p>Latitud: ' + lat + '</p>');
$('body').append('<p>Longitud: ' + long + '</p>');
}
function error(msg) {
alert(msg);
}
</script>
</body>
</html>
Haz clic aquí para observar el resultado.
El objeto navegador nos da acceso al nuevo objeto de geolocalización. El objeto de geolocalización tiene los siguientes métodos:
Haz clic en cada elemento.
Devuelve la posición actual del usuario.
Devuelve la posición actual del usuario, pero también continúa supervisando la posición e invoca la devolución de llamada apropiada cada vez que cambia la posición.
Este método finaliza la supervisión del método watchPosition de la posición actual.
Al determinar la ubicación del dispositivo de Internet, primero verifica que el navegador del usuario admita la función GeoLocation de forma nativa. Si lo hace, llama al método getCurrentPosition:
if (navigator && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geo_success, geo_error);
} else {
error('La ubicación geográfica no es compatible.');
}
Como este método se ejecuta de forma asíncrona, transfiérelo a dos funciones de devolución de llamada:
La devolución de llamada de error se pasa a un objeto de error de posición que contiene un código y una propiedad de mensaje. El código puede ser uno de los siguientes:
2 - Posición no disponible
La devolución de llamada de éxito se pasa a un objeto de posición que contiene un objeto de coordenadas y una marca de tiempo. El objeto de coordenadas contiene lo siguiente:
Haz clic en cada elemento.
Que se especifica en grados decimales.
Que se especifica en grados decimales.
Que se especifica en metros sobre el elipsoide.
Que se especifica en metros.
Que se especifica en metros.
Que es la dirección de desplazamiento especificada en grados
Que se especifica en metros por segundo.
De estos siete, sólo tres están garantizados: latitud, longitud y precisión.
Para la solución, toma la latitud y longitud y añádelas al cuerpo de nuestra página Web usando jQuery:
function printLatLong(lat, long) {
$('body').append('<p>Latitud: ' + lat + '</p>');
$('body').append('<p>Longitud: ' + long + '</p>');
}
Convertir una dirección en latitud y longitud
Supón que deseas convertir una dirección en coordenadas de latitud y longitud.
Utiliza Google Maps JavaScript API para convertir una dirección en latitud y longitud, como se muestra en el ejemplo siguiente, a esto se le llama geocodificación.
En los siguientes ejemplos es necesario hacer lo que a continuación se indica antes de correrlos:
Haz clic en cada elemento.
Registrarte como usuario de Google.
La clave que te proporcionen debes colocarla en el código de abajo donde dice "your_api_key_here", de lo contrario las Apis de Google no te darán resultados.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=your_api_key_here"></script>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
<!--Para obtener una key valida es necesario que entres con tus credenciales de google a
a https://developers.google.com/maps/documentation/javascript/get-api-key#key
La clave que te proporcionen debes colocarla en el codigo de abajo donde dice "your_api_key_here"
De lo contrario las apis de Google no te daran resultados-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=your_api_key_here"></script>
</head>
<body>
<div>
<label for="address">¿ Introduce tu dirección: ?:</label>
<input type="text" id="address" />
</div>
<div>
<input type="button" id="go" value="Haz clic aqui para encontrar la latitud y longitud" />
</div>
<script>
$(document).ready(function () {
//Boton de arranque.
$('#go').click(function () {
//Obtiene la direccion que el usuario introdujo
var address = $('#address').val();
if (address) {
////Usamos el API maps de google para geocodificar la dirección
//Iniciamos el objeto Geocoder
var geocoder = new google.maps.Geocoder();
//regresa las coordenadas.
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
//Imprime resultados
printLatLong(results[0].geometry.location.lat(), results[0].geometry.location.lng());
} else {
error('Google no retorno resultados.');
}
} else {
error("La geocodificacion en reversa fallo debido a: " + status);
}
});
}
else {
error('Por favor introduzca una dirección');
}
});
});
//Muestra la latitud y longitud.
function printLatLong(lat, long) {
$('body').append('<p>Lat: ' + lat + '</p>');
$('body').append('<p>Long: ' + long + '</p>');
}
function error(msg) {
alert(msg);
}
</script>
</body>
</html>
Haz clic aquí para observar el resultado.
Cuando el usuario haga clic en el botón, se usa jQuery para leer el valor y validar que no está en blanco.
Luego, crea una instancia del objeto Geocoder. Para hacerlo, llama al método de geocodificación, pero pasa una opción de dirección en lugar de latitud y longitud:
//Iniciamos el objeto Geocoder
var geocoder = new google.maps.Geocoder();
//regresa las coordinadas.
geocoder.geocode({ 'address': address }, function (results, status) {
Invertir geocodificación de una dirección con latitud y longitud
Supón que deseas convertir coordenadas de latitud y longitud en una dirección amigable para los humanos.
Utiliza la API de JavaScript de Google Maps para convertir la latitud y la longitud en una dirección como se muestra en el ejemplo.
El proceso de convertir datos geográficos, como la dirección de la calle y el código postal, en coordenadas geográficas, como la latitud y la longitud, se denomina geocodificación. Hacer lo contrario, convertir las coordenadas en una dirección, se denomina geocodificación inversa.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
<!--Para obtener una key valida es necesario que entres con tus credenciales de google a
a https://developers.google.com/maps/documentation/javascript/get-api-key#key
La clave que te proporcionen debes colocarla en el codigo de abajo donde dice "your_api_key_here"
De lo contrario las apis de Google no te daran resultados-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=your_api_key_here"></script>
</head>
<body>
<div>
<label for="address">¿ Tu dirección ?:</label>
<input type="text" id="address" />
</div>
<div>
<input type="button" id="go" value="Haz click aquí para encontrar la latitud y longitud" />
</div>
<script>
$(document).ready(function () {
//Boton de arranque.
$('#go').click(function () {
//Obtener la direccion ingresada.
var address = $('#address').val();
if (address) {
// Usar el API maps de google para geocodificar la dirección
// Inicializar el objeto Geocoder.
var geocoder = new google.maps.Geocoder();
//Regresar las coordenadas.
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
//print results
printLatLong(results[0].geometry.location.lat(), results[0].geometry.location.lng());
} else {
error('Google no retorno resultados..');
}
} else {
error("La geocodificacion fallo debido a:: " + status);
}
});
}
else {
error('Por favor introduce una dirección');
}
});
});
//output lat and long .
function printLatLong(lat, long) {
$('body').append('<p>Lat: ' + lat + '</p>');
$('body').append('<p>Long: ' + long + '</p>');
printAddress(lat, long, false)
}
function error(msg) {
alert(msg);
}
////Usamos el API maps de google para dar reversa al geocodigo de nuestra localidad
function printAddress(latitude, longitude, isMaxMind) {
//Iniciamos el objeto Geocoder
var geocoder = new google.maps.Geocoder();
//regresa las coordinadas.
var yourLocation = new google.maps.LatLng(latitude, longitude);
//Encontramos la informacion de nuestra localidad
geocoder.geocode({ 'latLng': yourLocation }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('body').append('<p>Tu dirección:<br />' + results[0].formatted_address + '</p>');
} else {
error('Google no retorno resultados.');
}
} else {
error("La geocodificacion en reversa fallo debido a:: " + status);
}
});
//if we used MaxMind for location add attribution link. Si usamos MaxMind para localizar y distribuirla liga
if (isMaxMind) {
$('body').append('<p><a href="http://www.maxmind.com" target="_blank">IP to Location Service Provided by MaxMind</a></p>');
}
function error(msg) {
alert(msg);
}
}
</script>
</body>
</html>
Haz clic aquí para observar el resultado.
Obtén las coordenadas y pásalas a una función printAddress, que usa la API de Google Maps para hacer la geocodificación inversa.
function printLatLong(lat, long) {
$('body').append('<p>Lat: ' + lat + '</p>');
$('body').append('<p>Long: ' + long + '</p>');
printAddress(lat, long, false)
}
La función printAddress comienza al crear un nuevo objeto Google Geocoder. El objeto Geocoder te da acceso al método de geocode, que puede incluir una variedad de opciones y devolver información basada en ellas.
function printAddress(latitude, longitude, isMaxMind) {
//Iniciamos el objeto Geocoder
var geocoder = new google.maps.Geocoder();
En tu caso, usa el método google.maps.LatLng para crear un nuevo objeto Google LatLng que se pase al código geográfico para obtener la dirección. El método de geocode es asíncrono, así que define una función de JavaScript en línea para manejar la devolución de llamada.
//regresa las coordinadas.
var yourLocation = new google.maps.LatLng(latitude, longitude);
La respuesta de la devolución de llamada contiene dos parámetros, uno para los resultados y el otro para el código de estado. Si el estado es correcto, es seguro analizar la matriz de objetos GeocoderResults almacenados en la variable de resultados. La variable de resultados es una matriz, ya que Geocoder puede devolver más de una entrada.
//Encontramos la informacion de nuestra localidad
geocoder.geocode({ 'latLng': yourLocation }, function (results, status) { ...
if (status == google.maps.GeocoderStatus.OK) {
A continuación busca un objeto GeocoderResults en la primera posición de la matriz y, si existe, agrega la propiedad formatted_address al cuerpo de la página Web.
if (results[0]) {$('body').append('<p>Tu dirección:<br />' + results[0].formatted_address + '</p>');
} else {
error('Google no retorno resultados.');
Direcciones desde la ubicación actual
Supón que deseas obtener direcciones desde la ubicación actual del usuario a una dirección específica.
Usa la API de Google Maps para mostrar la ruta de la misma manera que lo haría el sitio Web de Google Maps, y brinda al usuario la opción de mostrar la distancia en millas o kilómetros, como se muestra en el ejemplo siguiente:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
<!--Para obtener una key valida es necesario que entres con tus credenciales de google a
a https://developers.google.com/maps/documentation/javascript/get-api-key#key
La clave que te proporcionen debes colocarla en el codigo de abajo donde dice "your_api_key_here"
De lo contrario las apis de Google no te daran resultados-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=your_api_key_here"></script>
<script src="http://j.maxmind.com/app/geoip.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
</head>
<body>
<div class="field">
<label for="address">Ingrese la direccion destino:</label>
<input type="text" id="address" />
</div>
<div class="field">
<label for="units">Unidades:</label>
<select id="units">
<option value="IMPERIAL">Millas</option>
<option value="METRIC">Kilometros</option>
</select>
</div>
<div>
<input type="button" id="go" value="Get Directions" />
</div>
<div id="distance"></div>
<div id="map"></div>
<script>
//google maps globals:
var directionRenderer;
var directionsService = new google.maps.DirectionsService();
var map;
$(document).ready(function () {
////setup map starting point for Google Maps
////Iniciamo el punto de inicio del mapa para Google Maps
//establezca coordenadas iniciales en latitud -92 y longitud 32 que está en algún lugar alrededor
//de Kansas City en el centro y luego ajuste el zoom en 4 para que todo US sea visible e ingresado.
var kansas = new google.maps.LatLng(-92, 32);
var myOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,center: kansas
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
//Se dispara al hacer clic en el boton
$('#go').click(function () {
// utilice nuestro nuevo getLatLng y defina una función en línea para manejar la devolución
// de llamada.
getLatLng(function (latitude, longitude) {
//Defina el punto de inicio
var start = new google.maps.LatLng(latitude, longitude);
//Obtiene la direccion que el usuario introdujo
var address = $('#address').val();
if (address) {
//Define el punto
var end = $('#address').val();
//Asigna la opciones
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
//Hace el requerimiento de direcciones
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//muestre las direcciones usando el Renderer de las direcciones de Google
directionsRenderer.setDirections(result);
////distancia total de salida por separado.
var distance = getTotalDistance(result);
//salida millas o km
var units = $('#units').val();
if (units == 'IMPERIAL') {
$('#distance').html('Distancia total: <strong>' +
metersToMiles(distance) + '</strong> miles');
} else {
$('#distance').html('Distancia total: <strong>' +
metersToKilometers(distance) + '</strong> km');
}
} else {
error("La direccion fallo debido a: " + status);
}
});
}
else {
error('Por favor ingrese una dirección');
}
});
});
});
function getLatLng(callback) {
//prueba de presencia de geolocalización.
if (navigator && navigator.geolocation) {
//hacer la solicitud para la posición del usuario.
navigator.geolocation.getCurrentPosition(function (position) {
//controlador de éxito
callback(position.coords.latitude, position.coords.longitude);
},
function (err) {
//manejar el error pasando la devolución de llamada a la ubicación de MaxMind.
callback(position.coords.latitude, position.coords.longitude);
});
} else {
//geolocalización no disponible, pase la devolución de llamada a la ubicación de MaxMind.
callback(position.coords.latitude, position.coords.longitude);
}
}
//devuelve la distancia total en metros.
function getTotalDistance(result) {
var meters = 0;
var route = result.routes[0];
for (ii = 0; ii < route.legs.length; ii++) {
//google almacena el valor de distancia en metros.
meters += route.legs[ii].distance.value;
}
return meters;
}
function metersToKilometers(meters) {
return Math.round(meters / 1000);
}
function metersToMiles(meters) {
//1 milla = 1609.344 metros
return Math.round(meters / 1609.344);
}
function error(msg) {
alert(msg);
}
</script>
</body>
</html>
Haz clic aquí para observar el resultado.
Para el manejador del botón clic en el ejemplo principal, comienza usando la función getLatLng para recopilar la ubicación actual del usuario, que luego se usa para crear un nuevo objeto LatLng y almacenarlo en la variable de inicio.
A continuación recopila la dirección y almacena el texto como una cadena en la variable final.
Para obtener las instrucciones usa el objeto DirectionsService que se creó y almacenó en la variable global directionsService. El método de ruta del objeto DirectionsService toma un parámetro de objeto DirectionsRequest y un método de devolución de llamada. El objeto DirectionsRequest admite muchas opciones, pero la solución sólo necesita establecer las opciones de origen, destino y modo de viaje.
Las opciones de origen y destino pueden ser cadenas como la variable final o la
LatLng values. Para la opción travelMode, ajústelo a DRIVING (manejar ).
Analiza el resto del código en forma detallada.
Un mapa sencillo en Google Maps de tu localización actual
El último ejemplo de este tema consiste en el mapa de tu dirección actual:
<!DOCTYPE html>
<html>
<head>
<title>Localizador</title>
<script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
<!--Para obtener una key valida es necesario que entres con tus credenciales de google a
a https://developers.google.com/maps/documentation/javascript/get-api-key#key
La clave que te proporcionen debes colocarla en el codigo de abajo donde dice "your_api_key_here"
De lo contrario el mapa se mostrara solo por unos segundos y se mostrara un error-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=your_api_key_here"></script>
<style>
body{
font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
}
</style>
</head>
<body>
<header>
<h1>Localizador mediante HTML5</h1>
</header>
<section>
<article>
<div id='map_canvas' style='width:100%; height:400px;'></div>/*Esta capa hará de elemento contenedor del mapa*/
</article>
</section>
<script type="text/javascript">
var map;
var latitud;
var longitud;
$(document).ready(function () {
localizame(); /*Cuando cargue la página, cargamos nuestra posición*/
});
function localizame() {
if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
navigator.geolocation.getCurrentPosition(coordenadas, errores);
} else {
alert('¡Oops! Tu navegador no soporta geolocalización. Bája Chrome, que es gratis!');
}
}
function coordenadas(position) {
latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
cargarMapa();
}
function errores(err) {
/*Controlamos los posibles errores */
if (err.code == 0) {
alert("Oops! Algo ha salido mal");
}
if (err.code == 1) {
alert("Oops! No has aceptado compartir tu posición");
}
if (err.code == 2) {
alert("Oops! No se puede obtener la posición actual");
}
if (err.code == 3) {
alert("Oops! Hemos superado el tiempo de espera");
}
}
function cargarMapa() {
var latlon = new google.maps.LatLng(latitud, longitud); /* Creamos un punto con nuestras coordenadas */
var myOptions = {
zoom: 17,
center: latlon, /* Definimos la posicion del mapa con el punto */
mapTypeId: google.maps.MapTypeId.ROADMAP
};/*Configuramos una serie de opciones como el zoom del mapa y el tipo.*/
map = new google.maps.Map($("#map_canvas").get(0), myOptions); /*Creamos el mapa y lo situamos en su capa */
var coorMarcador = new google.maps.LatLng(latitud, longitud); /Un nuevo punto con nuestras coordenadas para el marcador (flecha) */
var marcador = new google.maps.Marker({
/*Creamos un marcador*/
position: coorMarcador, /*Lo situamos en nuestro punto */
map: map, /* Lo vinculamos a nuestro mapa */
title: "¿Dónde estoy?"
});
}
</script>
</body>
</html>
Haz clic aquí para observar el resultado.
