Para continuar con el tema de la georreferenciación, esta vez voy a mostraros cómo es posible posicionarnos en un mapa de Bing Maps, además de recuperar nuestra localización aproximada a través del API Geolocation (No disponible en todos los navegadores, aunque si en las últimas versiones de los más conocidos).

API Geolocation

Antes de posicionarnos en un mapa lo primero que debemos hacer es comprobar que el navegador soporta dicha API.

$(document).ready(function () {

   //Check if geolocation is available
   if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(
           function (position) //success
           {
               GetMap(position);
           },
           function (error) //error
           {
               alert(error);
           }
       );
   }
   else
      GetMap(null);

});

Si navigator.geolocation no es undefined, podemos hacer la llamada a getCurrentPosition la cual acepta como parámetros dos funciones de callback: la primera si la llamada se ha realizado con éxito y la segunda en caso de error.

Bing Maps API

En el caso de Bing Maps, para poder utilizar la API es necesario registrarnos en Bing Maps Account Center con un Windows Live ID. Una vez logados, podremos acceder al menú donde seleccionaremos Create or view keys.

Damos de alta una nueva aplicación con el fin de generar una clave que posteriormente utilizaremos en la llamada.

var credentials = "App9aeMkRCpeXATFyZ8....cR9dqc6T4rIMG7XTnd";
var bingMap = null;

Por otro lado, necesitamos añadir un enlace al siguiente script para acceder a las funciones de la API.

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=es-ES"></script>

Si nos fijamos en la referencia, vemos que al final aparece un parámetro llamado mkt que nos permite indicar la cultura del mapa. A día de hoy existen varias culturas disponibles.

Una vez obtenida la key y añadida la referencia al script de Bings Maps, ya podemos implementar la función GetMap, llamada desde el evento ready del documento.

function GetMap(position) {

    var lat = null;
    var long = null;

    if (position != null) {
        lat = position.coords.latitude;
        long = position.coords.longitude;
    }
    else{
        lat = 47.616023; //sample values (Seattle)
        long = -122.333565;
    }

    bingMap = new Microsoft.Maps.Map($("#mapDiv")[0],
                  { credentials: credentials,
                    center: new Microsoft.Maps.Location(lat, long),
                    mapTypeId: Microsoft.Maps.MapTypeId.road,
                    zoom: 16
                  });

   var center = bingMap.getCenter();
   var pin = new Microsoft.Maps.Pushpin(center, { text: '1' });
   Microsoft.Maps.Pushpin.prototype.title = null;
   pin.title = "Infobox Position";
   Microsoft.Maps.Pushpin.prototype.description = null;
   pin.description = "This is my position lat:" + lat + " long: " + long;

   //Add handler for the pushpin click event.
   Microsoft.Maps.Events.addHandler(pin, 'click', displayEventInfo);
   bingMap.entities.push(pin);
}

Si os dais cuenta, los pasos a seguir son básicamente los mismos que utilizábamos en la  API de Google Maps, a excepción del parámetro para las credenciales. En primer lugar, generamos el mapa, asignando como lienzo un div llamado mapDiv, pasamos la key como credencial, asignamos las coordenadas obtenidas como el centro del mapa, un tipo para el mismo y por último el valor del zoom.

Después creamos un objeto del tipo PushPin para añadir un punto de interés en el mapa con las coordenadas que utilizamos para establecer el centro y añadimos algunos valores como el titulo y la descripción, este último correspondiente al contenido del pop up.

Por último añadimos un handler al evento click, el cual llamará a la función displayEventInfo y adjuntamos el PushPin al mapa.

Para completar el ejemplo, creamos la función displayEventInfo que mostrará el pop up al hacer clic sobre el marker y agregamos los elementos HTML correspondientes al lienzo del mapa y el conjunto de divs que forman la ventana de información.

    function displayEventInfo(e) {
        if (e.targetType == "pushpin") {
            var pix = bingMap.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control);
            $("#infoboxTitle").html(e.target.title);
            $("#infoboxDescription").html(e.target.description);

            var infobox = $("#infoBox");
            infobox.css({
                "top": (pix.y - 60) + "px",
                "left": (pix.x + 5) + "px",
                "visibility": "visible"
            });

            $("#mapDiv").append(infobox);
        }
    }   

</script>
<div id='mapDiv'>
</div>
<div id='infoBox'>
    <div id='infoboxText'>
        <b id='infoboxTitle'></b>
        <img id="imgClose" src="/Content/images/close_icon.gif" alt="close" />
        <a id='infoboxDescription'></a>
    </div>
</div>

Si accedemos a la aplicación desde Firefox vemos que aparece el siguiente mensaje de confirmación (No siempre deseamos que una aplicación sepa nuestras coordenadas):

Desde el momento en el compartimos nuestra ubicación, unos segundos después (a mi parecer creo que tarda bastante) aparece nuestro mapa con nuestra ubicación aproximada

Una sitio muy interesante para probar las funcionalidades que nos ofrece la API es Maps Interative SDK donde nos permite visualizar el resultado y recuperar el código asociado.

Más información

Adjunto el proyecto por si fuera de utilidad

¡Saludos!