Otra de las cosas nuevas que trae HTML5 es la geolocalización, con ella podemos determinar en qué lugar (coordenadas) se encuentra un usuario.

Determinar la posición de un usuario es bastante sencillo, y en este post les voy a mostrar como lo podemos hacer, y como complemento, mostraremos dicha ubicación en un mapa utilizando Bing Maps.


La sintaxis general para trabajar con la geolocalización es:


navigator.geolocation.getCurrentPosition(GetPosition,funcionError, options); 

Entonces se utiliza el método getCurrentPosition de geolocation, donde el primer parámetro es la función que se llama si todo nos sale bien, la segunda será la función que se ejecuta cuando algo falla y por último podemos definir un set de opciones.

Algunas de las opciones que podemos definir son:

  • enableHighAccuracy: De tipo booleano, indica si se debe obtener la posición más acertada.
  • timeout: indica el tiempo permitido en milisegundos para intentar obtener la posición.

Una vez obtenida la posición accedemos a las coordenadas (latitud y longitud) mediante un objeto position, el cual contiene dicha información.

Ahora que ya tenemos algo (no toda) de teoría manos a la obra, la idea como comente antes es mostrar en donde estamos en un mapa, y por otro lado vamos a tener dos campos de texto para mostrar la latitud y la longitud.

Escribir el HTML:

De una manera muy simple tenemos los dos campos de texto para mostrar la latitud y la longitud, y por otro lado un div el cual será nuestro mapa:


<p>Geolocalizacion en HTML </p> 
<p>Latitud: <input type="text" id="txtLatitud" /> </p> 
<p>Longitud: <inputtype="text"id="txtLongitud" /> </p> 
<hr/> 
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div> 

Referenciar los JavaScript

Ahora se debe referenciar el archivo js de jQuery y el API de Bing Maps:


<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

Definir las opciones:


Definir en un variable las opciones que vamos a utilizar:


var options = {
    enableHighAccuracy: true,
    timeout: 45000
};

Obtener posición:


navigator.geolocation.getCurrentPosition(GetPosition,funcionError, options);

Luego definimos la función funcionError:


function funcionError(error)
{
    alert(error.message);
}

Y la función GetPosition:


function GetPosition(posicion)
{
    var latitud = posicion.coords.latitude;
    var longitud = posicion.coords.longitude;
    $("#txtLatitud").val(latitud);
    $("#txtLongitud").val(longitud);
    GetMap(latitud,longitud);
}

En esta función lo interesante es que tenemos la variable posicion, y es por medio de ella que accedemos a los valores de latitud y longitud respectivamente, finalmente se observa el llamado a la función GetMap, la cual recibe la latitud y la longitud para poder ubicarse en el mapa, en resumen la función GetMap sería:


function GetMap(a,b)
{   
    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
    {
        credentials: "######",
        center: new Microsoft.Maps.Location(a, b),
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        zoom: 8
    });
}

Pero esa parte ya nos la da es el API de Bing, y en donde dice ### debemos colocar el número dado por el API.

Listo, ahora un tema importante es que cuando se intente obtener la localización del usuario, siempre el usuario debe permitir realizar dicha acción, es por eso que al cargar la página vemos que se muestra un mensaje como (mensaje tomado de Internet Explorer 9):

Imagen1

Y allí el usuario puede decidir aceptar o rechazar la petición de localización, en caso afirmativo lo que se va a obtener es:

Bing Maps

Espero les haya gustado el post, así que les dejo el ejemplo y claro, viene más de HTML5.


Descarga el ejemplo! (ten en cuenta que para que le ejemplo te funcione debes colocar la key que te da el API de Bing)