Gmaps.js para facilitar la creación de mapas

Posted by in Frameworks

Antes de empezar, agradecer a la gente de webucator por elegir esta entrada para un video educativo, dentro de los cursos que ofertan, entre ellos, varios dedicados a Javascript.

Esta entrada está dedicada a conocer cómo trabajar con Google Maps API mediante Gmaps.js, una librería que hace fácil lo complejo de trabajar con la API de Google Maps, y que se apoya en la todapoderosa jQuery.

Google Maps es una de las aplicaciones de más éxito de Google, pero trabajar con su API resulta tremendamente engorroso, por lo que esta librería de Javascript viene para facilitar la vida.

Un pequeño ejemplo con gmaps.js

Nada mejor que programar un pequeño ejemplo para ver la potencia de dicha librería, que puedes ver aquí y el código lo tienes disponible en GitHub.

Se trata de una aplicación donde puedes calcular la ruta en coche, habilitando un botón para comprimir la ruta (recalculando el recorrido entre el punto inicial y el punto final). Además, la información de los puntos quedará guardada en localStorage para no perder la información salvo que el usuario decida limpiarla.

Para completar este pequeño reto, vamos a hacer uso de PureCSS para darle un mejor aspecto en lo que al front-end se refiere. Se han agregado además CSS para adaptarlo a resoluciones para móviles. Obligatoriamente necesitamos las librerias jQuery.js (otra posibilidad es usar zepto.js, que es una versión ligera de jQuery y es la que yo he usado aquí) y GMaps.js, donde yo he usado la versión 0.4.11 que es la última disponible (mientras escribo esta entrada).

El código HTML queda así:


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Curso Firefox OS - Ejercicio Final Semana 4</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- pureCSS -->
<link rel="stylesheet" href="css/manejandodatos_purecss.css" media="screen" />
<link href="css/movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 540px)" />
<link rel="stylesheet" href="css/purecss-min.css"/>
<link rel="stylesheet" href="css/smoke.css"/>

<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/smoke.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/gmaps_0.4.11.js"></script>

</head>

<body>

<header>

<h1>Firefox OS - Geolocalización</h1>

</header>



<div id="map"></div>


<footer class="fixed-bar">
<button id="compactar" class="pure-button">Compactar</button>
<button id="limpiar" class="pure-button">Limpiar</button>
Desarrollado por <a href="http://www.manejandodatos.es" target="_blank">www.manejandodatos.es</a>
</footer>

</body>
</html>

El código Javascript

El código Javascript requiere de una variable map y una variable ruta, que será un Array y será lo que se almacena en localStorage (es importante destacar que para almacenar un Array en localStoraje haremos uso de las funciones JSON.stringify y JSON.parse, la primera para escribir y la segunda para leer).

Necesitaremos además varias funciones, cómo clear para limpiar los datos del localStorage. La función principal de la aplicación es geolocalizar, y es la que se encarga de presentar el mapa, además de preocuparse de mostrar errores en caso de que algo no funcione bien. Tenemos que agregar dos funciones para presentar la ruta (función enlazaMarcador) y otra función mostrar para pintar la ruta y el marcador.

El código javascript es este:


var map;
var ruta = [];

$(function(){
function clear () { ruta = []; localStorage.ruta = JSON.stringify(ruta); };

$('#compactar').on('click', function () {
ruta1 = ruta[0]; ruta2 = ruta[ruta.length - 1];
ruta = [ruta1, ruta2];
geolocalizar();
} );
$('#limpiar').on('click', function () {
clear();
geolocalizar();
} );

function muestra (origen, fin) {
// muestra ruta entre marcas anteriores y actuales
map.drawRoute({
origin: origen,  // origen en coordenadas anteriores
destination: fin, // destino en coordenadas del click o toque actual
travelMode: 'driving',
strokeColor: '#3B9313',
strokeOpacity: 0.6,
strokeWeight: 5
});
map.addMarker({ lat: fin[0], lng: fin[1]});  // pone marcador en mapa
map.setCenter( fin[0], fin[1]);
};

function enlazarMarcador(e){
var lat2 = e.latLng.lat(); var lng2 = e.latLng.lng();  // guarda coords para marca siguiente
if (ruta.length > 0)
{ muestra(ruta[ruta.length - 1], [lat2, lng2]) }
else {
map.addMarker({ lat: lat2, lng: lng2});  // pone marcador en mapa
}
ruta.push([lat2, lng2]);
// console.log(ruta);
localStorage.ruta = JSON.stringify(ruta);
};

function geolocalizar(){
GMaps.geolocate({
success: function(position){
var lt, ln;
if (ruta.length == 0) {
lt = position.coords.latitude;  // guarda coords en lat y lng
ln = position.coords.longitude;
}
else
{ lt = ruta[0][0]; ln = ruta[0][1];    }
map = new GMaps({  // muestra mapa centrado en coords [lat, lng]
el: '#map',
lat: lt,
lng: ln,
//setZoom: 8,
click: enlazarMarcador,
tap: enlazarMarcador
});
if (ruta.length > 0) {
map.addMarker({ lat: ruta[0][0], lng: ruta[0][1]});  // marcador en [lat, lng]
}
if (ruta.length > 1) {
for (i=1; i<ruta.length; i++) { muestra(ruta[i-1], ruta[i]); }
}
map.fitZoom();
},
error: function(error) { smoke.alert('Error en la Geolocalización: '+error.message); },
not_supported: function(){ smoke.alert("Su navegador no soporta geolocalización"); },
});
};

try { ruta = JSON.parse(localStorage.ruta);  // console.log( ruta.length );
}   catch (e) { console.log("Parsing error:" + e); }
geolocalizar();
});

El resultado obtenido es este:

ejemplo GMaps

ejemplo GMaps

Algunas particularidades del código es que cada vez que se pincha en el mapa para indicar un nuevo punto, éste quedará en el centro (función setCenter). Además, cuando se vuelve a la aplicación y ya existe una ruta, se modifica el zoom mediante la función fitZoom.

La documentación completa de gmaps.js está aquí, y además dispones de muchos y variados ejemplos para que puedas comprobar todo lo que puedes hacer gracias a esta librería, cómo cargar archivos KML, pintar polígonos y polilíneas, geolocalización, trabajar con información en formato JSON, ….

MapStylr

Por último, no quiero perder la oportunidad de presentarte a MapStylr, que es una herramienta online para la publicación de mapas sin necesidad de programar absolutamente nada.

Espero que te sirva lo que te presento hoy!