Diciembre 9

2016

Algo que queda impresionante en una web es el tema de mostrar un mapa desde una dirección hasta otra, para así representar el camino, por ejemplo, para ir a tu casa desde la casa de un amigo.

Esto es lo que vengo a mostrar hoy, y la verdad que es algo mucho más fácil de lo que parece, y todo gracias a nuestro "gran amigo Google".

Primero tenemos abrir una cuenta en Google Apis para obtener una key que es la que nos va a posibilitar el poder trabajar con las API de Google. Hay un montón y poco a poco iremos aprendiendo como utilizarlas e irles sacando partido. Puedes ir al Sitio Oficial de APIS de Google MAPS.

Trabajando con la API de Google MAPS

La API con la que vamos a trabajar es Google Maps JavaScript API y una vez obtenida nuestra KEY la llamaremos con la siguiente línea dentro de nuestro HEAD en la página que lo vamos a utilizar.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=[LA KEY OBTENIDA]&sensor=[TRUE O FALSE]&language=es"></script>

Podeis observar una variable llamada sensor esta establece si queremos que identifique la posición del usuario o no. Eso ya depende de lo que requiera tu página web o aplicación.

Luego debemos definir 3 variables globales:

var directionsDisplay = null;
var directionsService = null;
var map = null;

La primera nos da las herramientas necesarias para mostrar la información obtenida en el navegador. La segunda es el servicio que llamar al servicio de la base de datos de Google Maps para obtener los puntos y las rutas existentes. Y la tercera es la Variable que va a almacenar el map.

Ahora solo tenemos que crear una variable que va a ser la encargada de pasar los parámetros a la API, y será una cosa así

    var request = {
        origin: [TEXTO CON LA DIRECCIÓN DE ORIGEN],
        destination: [TEXTO CON LA DIRECCIÓN DE DESTINO],
        travelMode: google.maps.DirectionsTravelMode['DRIVING'],
        unitSystem: google.maps.DirectionsUnitSystem['METRIC'],
        provideRouteAlternatives: false
    };

Vamos a explicar un poco las tres últimas variables.

  • trabelMode: Con esta vabliable asignamos cómo queremos que se realice la busqueda, tenemos varias opciones : DRIVING, BICYCLING, WALKING. Puedes consultar la documentación de la API para saber si han agregado mas modos.
  • unitSystem: Se refiere al tipo de unidad en el que se mostrarán las distancias y sus opciones son: METRIC, IMPERIAL. Como siempre consulta la documentación para ver si hay más.
  • provideRoutAlternatives: Si lo ponemos a true nos propondrá rutas alternativas.
Por último creamos una función la cual pondrá en funcionamiento todo. En mi caso la he llamado initMap(o, d, s) y le paso tres parámetros. o = origen, d = destino, s = id del div que mostrará el resultado.

// Call to google maps for search a route from 2 points
// o: origin
// d: destination
// s: name of div to send the map
function initMap(o, d, s) {
var request = {
origin: o,
destination: d,
travelMode: google.maps.DirectionsTravelMode['DRIVING'],
unitSystem: google.maps.DirectionsUnitSystem['METRIC'],
provideRouteAlternatives: false
};

map = new google.maps.Map($('#' + s).get(0));
directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();

directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
} else {
document.getElementById(s).innerHTML = "<p style='text-align: center;'>Address not found</p>"; //delete content
}
});
}

Como vereis si no se encuentra un resultado nos muestra el mensaje de Address not found para evitar que se nos quede el DIV en blanco, que queda feo.

Un ejemplito sencillo

Bueno aqui os dejo el código HTML que hace uso de todo lo que te he mostrado hasta ahora, espero que lo entendais y si teneis cualquier duda, no dideis en comentar para que se aclare todo.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- JQUERY SCRIPTS -->
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=[LA KEY QUE HAS OBTENIDO]&sensor=false&language=es"></script>
<script src="../js/maps.js"></script>
<script type="text/javascript">
$(document).ready(function () {
initMap('Madrid', 'Barcelona', 'map_canvas')
});

/* recoger el valor de un elemento */
function getElementValue(elemId) {
try {
return document.getElementById(elemId).value;
} catch (e) {
return;
}
}
</script>
</head>
<body>
<div>
<label for="origen">Origen</label>
<input type="text" name="origen" id="origen" placeholder="calle, ciudad, estado..." />
<br />
<label for="destino">Destino</label>
<input type="text" name="destino" id="destino" placeholder="calle, ciudad, estado..." />
<br />
<input type="button" id="buscar" value="Buscar ruta" onclick="initMap(getElementValue('origen'), getElementValue('destino'), 'map_canvas')" />
</div>
<br />
<div>
<div id="map_canvas" style="float:left; width:70%; height:500px"></div>
</div>
</body>
</html>

HAPPY CODING

#HTML #javascript #APIs

Prueba como queda aqui

0 Comentarios



Archivo