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

Una vez vistos los fáciles ejemplos para realizar mapping en tu sitio web, sin necesidad de invertir muchísimo tiempo, podemos incluir un mapa muy sencillo, que nos permite mostrar la ubicación de nuestra empresa, o en definitiva lo que deseemos.

En la actualidad, desde la llegada de los smartphone, una de las prioridades es la geolocalización del usuario, para así poder mostrar contenidos en función de la ubicación en la que se encuentra el consumidor. No solo podemos incluir mapas, sino que también información o publicidad acorde a la zona.

HTML5 entre sus novedades propuestas, incluye acceso a la geolocalización, para ello utilizaremos una propiedad del navegador, "geolocation", la cual nos va a permitir acceder a la posición actual del cliente web. Acceder a esta información, requiere que el usuario acepte dar esta información mediante un prompt que aparece en el momento que consultamos esta propiedad.

Para ello verificamos que tiene geolocalización, una vez comprobado, accedemos a la posición, y guardamos la latitud y la longitud en dos input en nuestra página a modo de ejemplo, más adelante, podemos ver que trabajando con esas coordenadas, podemos tener bastante juego.

<script type="text/javascript">
    if(navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(function(position)
        {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            document.getElementById("lat").value = lat;
            document.getElementById("lon").value = lon;
        });
    }
</script>

Ficha técnica:

HTML5
Google Maps / Bing Maps

Vamos a empezar con el API de Google, para ello, lo primero es agregar la clave pública de nuestro sitio. Una vez agregado, creamos una capa con el id "mapGoogle" a la que vamos a cargar el API de Google con las coordenadas que nos ha proveído la geolocalización.

  var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var myOptions = {
        center: new google.maps.LatLng(lat, lon),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
    var mapGoogle = new google.maps.Map(document.getElementById("mapGoogle"), myOptions);

Después agregamos otra capa "mapBing" la cual va albergar el API de Bing Maps, para ello debemos agregar la referencia al JavaScript y hacemos un "getMap" incluyendo la Key de Bing asociada a nuestro sitio web.

<!DOCTYPE HTML>
<html>
<head>
<title>Geolocation(HTML5)</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=KEY_GOOGLE_MAPS&sensor=false"></script>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript">
        if(navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(function(position)
            {
                var lat = position.coords.latitude;
                var lon = position.coords.longitude;
                const Zoom = 14;
                var myOptions = {
                    center: new google.maps.LatLng(lat, lon),
                    zoom: Zoom,
                    mapTypeId: google.maps.MapTypeId.ROADMAP };
                var mapGoogle = new google.maps.Map(document.getElementById("mapGoogle"), myOptions);
                var mapBing = null;
                map = new Microsoft.Maps.Map(document.getElementById('mapBing'), {
                                credentials: 'KEY_BING_MAPS',
                                center: new Microsoft.Maps.Location(lat, lon), zoom: Zoom});
                document.getElementById("lat").value = lat;
                document.getElementById("lon").value = lon;
            });
        }
        else
        {
            alert("No dispone de geolocalización");
        }
    </script>
</head>
<body>
    <div id="inputs">
    <input id="lat" />
    <input id="lon" />
    </div>
    <div id="maps" width="100%" height="450px">
        <div id="mapGoogle" style="margin:0; width:50%; height:450px; float:left;"></div>
        <div id="mapBing" style="margin:0; width:50%; height:450px; float:right; position: relative;"></div>
    </div>
</body>
</html>