¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Cómo ofrecer direcciones dinámicas de un negocio

Si habéis programado alguna vez en entorno web, es muy probable que os halláis topado con alguna de las APIs de Google. Si le echáis un ojo a la página de APIs podréis ver que hay un montón. En serio.

Hoy me gustaría hablar sobre el API de Direcciones, que está dentro de Google Maps. Y es que, con esta pequeña porción de este API podemos, por ejemplo, indicarle fácilmente a una persona dónde está una tienda/ubicación, basándonos en la ubicación del propio usuario, gracias a las múltiples opciones de geo-localización que hay disponibles hoy en día.

Vamos a usar jQuery/JavaScript y marcado HTML así que, empecemos con el propio marcado.

<!-- Dirección de la Oficina -->  
<p>Encuentra nuestra oficina en:  
  <br /> Calle de la Piruleta 1
  <br /> Bernedo, Álava -
  <strong>CP</strong>: 01118</p>
<!-- Aquí ocurrirá la magia -->  
<div id="bloqueDirecciones">  
  <button id="obtenerDirecciones">Obtener direcciones</button>
  <div id="panelDirecciones"></div>
</div>  

Teniendo en cuenta que es solo un ejemplo, podríamos añadir justo arriba de la dirección, un mapa de Google Maps, pero es importante permitir que la gente sepa dónde estás y la necesitaremos para facilitársela al API de Google. Por supuesto, la referencia a la dirección, es de esta escena.

Observad que bajo la dirección, tenemos un bloque oculto al usuario. Ahí es donde colocaremos la información que nos devuelva el API. Pasemos ahora al JavaScript.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=es"></script>  
<script>  
$(document).ready(function() {
    $("#obtenerDirecciones").show();
    // Si no hay Geolocalizacion en el navegador lo dejamos todo
    if(!navigator.geolocation) return;

    var direccionDestino = "Calle de la Piruleta, 1 01194 Bernedo";

    // El gestor de errores genérico nos dará un mensaje básico
    function gestionarError(e){
        $("#bloqueDirecciones").html("<p>¡Vaya! No hemos podido encontrar la dirección hasta nuestra ubicación</p>");
    }

    function pedirDirecciones(geo){
        var servicioDirecciones = new google.maps.DirectionsService();
        var displayDirecciones = new google.maps.DirectionsRenderer();
    displayDirecciones.setPanel($("#panelDirecciones")[0]); //Le indicamos donde las vamos a mostrar
    var ubicacionUsuario = new google.maps.LatLng(geo.coords.latitude, geo.coords.longitude);
        // Configuramos la petición        
        var peticion = {
            origin: ubicacionUsuario, // Origen
            destination: direccionDestino, // Destino
            travelMode: google.maps.TravelMode.DRIVING // Modo de dirección - Conducción
        };
        servicioDirecciones.route(peticion, function(resultado, estado) {
            if (estado == google.maps.DirectionsStatus.OK) {
                $("#panelDirecciones").html(""); // Quitamos el mensaje de obteniendo direcciones
                displayDirecciones.setDirections(resultado);
            }
        });

    }

    $("#obtenerDirecciones").on("click", function() {
        $("#panelDirecciones").html("<p>Obteniendo su posición e instrucciones de llegada. Por favor espere.</p>");        
        navigator.geolocation.getCurrentPosition(pedirDirecciones,gestionarError);
    });             
});
</script>  

Analicemos el código desde el principio. Lo primero que hacemos es revisar si hay geolocalización. Si no está soportado por el navegador, dejamos de ejecutar. Podríais añadir algún mensaje de que el navegador no soporta esa característica, pero hemos hecho algo muy básico.

Después, creamos una variable con la dirección de la tienda.

Nuestra función de gestión de errores solo será llamada si el navegador es incapaz de obtener una posición.

Lo siguiente que definimos es la función que realmente hace todo el trabajo. Comenzamos configurando los servicios de direcciones. Hacemos una instancia del servicio y una del renderizador. Ahora veremos por qué.

Obtenemos los datos de la geolocalización que nos ha pasado la función getCurrentPosition y creamos una pareja de longitud/latitud para que Google pueda trabajar con ella. Después, creamos la petición en sí. Google acepta tanto parejas de Longitud/Latitud como direcciones genéricas tales como “Sevilla”. Lo último que hacemos es realizar la petición de la ruta.

La mejor parte es que Google nos devuelve una respuesta con mucha información, ¡e incluso se ve genial! El resultado lo podéis ver aquí:

Y esto es todo. Podéis ver la Demo haciendo click en el botón de abajo. Con un poco de trabajo de personalización podéis coger el código y hacer virguerías o, símplemente, cambiad la dirección, ¡y a disfrutar!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!