Ubicación de usuarios con Geolocalización HTML5
La geolocalización se logra en HTML5 gracias al potente API JavaScript combinada con el uso de Google Maps. De esta manera los desarrolladores, obtendremos la ubicación de los usuarios sobre un mapa.
La geolocalización se puede usar para diferentes fines, puedes ofrecer servicios dependiendo de la ubicación de usuario.
Demo: Geolocalización con HTML5
Al final de este articulo tendrán un link para descargar el código e implementarlo en sus proyectos, encontraran tres archivos un index.html que es la pagina principal un script.js que es la programacion de tras de este ejemplo y un style.css que es la hoja de estilos que utilice para darle el aspecto que tiene en el demo que mostramos anteriormente.
Index
Dentro de este archivo podemos encontrar la etiqueta <head></head>, dentro de ella esta la conexión a la API de Google Maps que nos ayuda a mostrar el mapa con la ubicación del usuario y también esta la conexión a nuestro código JavaScript, script.js.
<head> <!--API Google Maps--> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <!--API Google Maps--> <!--Conexion con script.js--> <script src="js/script.js" type="text/javascript"></script> <!--Conexion con script.js--> </head>
Tambien tenemos dentro del cuerpo una etiqueta p y un div que son importantes ya que es ahí donde se coloca el resultado de la conexión, el estatus y el mapa, es importare no cambiar los id ya que esos id los esta utilizando el script.js para mostrar los datos.
<p id="status">Buscando su localización…</p> <div id="map"></div> </div>
Script
En el código de este archivos JavaScript primero detectamos si el navegador soporta la geolocalización, luego pedimos las coordenadas del usuario, para esto el usuario tiene que aceptar si desea mostrar su ubicación ya que la configuración por defecto de la mayoría de los navegadores es así, una vez recibidas las coordenadas mostramos la ubicación del usuario en un mapa de Google. (Llamada a la Geolocation API, Mapa Google centrado en la posición del usuario, Error, Otras propiedades de getCurrentPosition() y La función watchPosition().)
function success(position) {
var status = document.querySelector('#status');
status.innerHTML = "¡Su ubicación!";
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '100%';
document.querySelector('#map').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Usted está aquí."
});
}
function error(msg) {
var status = document.getElementById('status');
status.innerHTML= "Error [" + error.code + "]: " + error.message;
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error,{maximumAge:60000, timeout: 4000});
} else {
error('Actualiza el navegador web para usar el API de localización');
}
