#HowTo: Hacer mapping y no morir en el intento 4/7

Microsoft también provee su propio API de mapas, Bing, el cual posee funciones muy similares al de Google, y otras distintas propias.

En definitiva, escoger uno u otro es una cuestión de gustos, o de afinidad con un proveedor u otro. Por lo que, escojamos el que escojamos, tendremos funciones típicas de APIs de mapas, y otras relacionadas con las tecnologías que vende el proveedor.

Ficha técnica:

Bing Maps
Ajax 7.0

Lo primero que hay que hacer, al igual que con los APIs de Google, es registrarse como desarrollador de Bing. Para ello accedemos aquí y nos registramos como desarrolladores de Bing para así poder obtener la clave para nuestro sitio web.

En este PowerPoint se detalla el proceso completo de registro y obtención de la key necesaria para nuestro sitio web.

Nos logamos con nuestro live id, si no tienes una cuenta puedes crearla desde aquí no es necesario hacer una nueva cuenta de correo puedes asociar tu propia dirección de correo actual.

Una vez dentro del centro de cuentas de map, creamos una nueva key, la cual introducimos el nombre que le queremos poner a nuestra aplicación, la url y el tipo.

En este caso he seleccionado para desarrollador, que no te permite exceder más de 125.000 sesiones o 500.000 transacciones en periodos de 12 meses, lo cual para lo que nos ocupa es más que suficiente.

Una vez obtenida la clave empezamos con la "chicha". En el siguiente ejemplo, introducimos nuestra key en las credenciales donde sustituiremos 'TUCLAVE'.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Nuestro mapa</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
        <script type="text/javascript">
            var map = null;
            function getMap()
            {
                map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'TUCLAVE'});
            }
        </script>
    </head>
    <body onload="getMap();">
    <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
    </body>
</html>

Finalmente tenemos algo similar a esto: