GMaps.js: una forma muy fácil de publicar mapas en la web

por

Hasta hace relativamente poco tiempo la publicación de mapas en la web era una tarea complicada, solo al alcance de grandes empresas con disponibilidad de muchos recursos, grandes presupuestos y de equipos técnicos sofisticados. El uso masivo de los mapas en la web ha popularizado mucho este tipo de aplicaciones, a lo que ha contribuido también la disponibilidad de datos geográficos de calidad como los de OSM o Google. La aparición de las librerías JavaScript de software libre como Leaflet u OpenLayers hace que crear un mapa web sea ahora mucho más fácil.

El webmapping generalmente involucra un navegador web u otro agente de usuario capaz de realizar interacciones cliente-servidor. En consecuencia requieren de algún conocimiento de programación, especialmente en los lenguajes utilizados en la web: HTML, CSS y JavaScript. Si bien esto es de aplicación a todas las librerías webmapping, hay algunas que están diseñadas para reducir el uso de código al mínimo y de esa forma hacer que la publicación de mapas en la web sea todavía más sencillo. Es el caso de la librería GMaps.js de Google.

¿Qué es GMaps.js?

GMaps.js es una librería JavaScript que se basa en Google Maps y que permite publicar mapas en la web de forma extremadamente sencilla. Utiliza jquery lo que permite reducir el código al máximo y hacerlo fácilmente entendible. Nos permite crear mapas con marcadores, rutas, geolocalización, perfiles longitudinales… y muchas otras funciones. La documentación es un poco deficiente, pero a cambio tiene un buen catálogo de ejemplos.

Para utilizar Gmaps.js debemos acudir a su página y proceder a su descarga. Habremos obtenido una carpeta que contiene varios archivos, el archivo que nos interesa es: GMaps.js. A continuación hay que incorporar este archivo junto con las referencias a jquery y a la API de Google, de la siguiente forma.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmaps.js"></script>

La estructura HTML que vamos a utilizar es muy sencilla, solo necesitamos la creación de un elemento div que será el encargado de crear el espacio donde alojaremos el mapa.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GMaps.js &mdash; Geolocation</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="gmaps.js"></script>

</head>
<body>
  <h1>GMaps.js &mdash; Geolocation</h1>
  <div id="map"></div>
  
</body>
</html>

El núcleo de la aplicación está formado por el objeto map, que lo creamos con una instancia a GMaps. Esta es la clase fundamental de la librería y la encargada de manejar el mapa. Gmaps necesita que le proporcionemos tres propiedades:

  • el: indica la referencia al id=»map»,
  • lat y lng  son las coordenadas geográficas del centro del mapa.
var map = new GMaps({
        el: '#map',
        lat: 0,
        lng: 0
      });

Un mapa para localizar la posición del usuario con GMaps.js

Vamos a describir a continuación un ejemplo que ilustra el potencial de Gmaps.js. Veremos que con solo unas pocas líneas podemos construir un mapa que nos indique la posición geográfica del usuario. Para eso utilizaremos el método .geolocate de GMaps.

    GMaps.geolocate({
        success: function(position){
          lat = position.coords.latitude;  
          lng = position.coords.longitude;
          //Definimos la vista del mapa sobre las coordenadas obtenidas
          map.setCenter(lat, lng);
          //Añadimos un marcador
          map.addMarker({ lat: lat, lng: lng});  
        },
        error: function(error){
          alert('Geolocation failed: '+error.message);
        },
        not_supported: function(){
          alert("Your browser does not support geolocation");
        }
      });
    });

Como vemos en el código anterior tenemos tres partes. En el caso de que la conexión se produzca correctamente y permitamos obtener la ubicación de nuestro dispositivo tendrá lugar success. Si hay un error en la conexión la función pasará a error y nos mostrará el mensaje correspondiente y en el caso de que nuestro navegador no tenga soporte para la geolocation nos aparecerá una ventana emergente con el texto: «Your browser does not support geolocation«.

En el caso en que la localización sea posible, tomará las coordenadas de nuestra posición y las guardará en las variables lat, lng que hemos creado. A continuación re-dibuja el mapa, realizando una nueva vista que tome como centro del mapa las coordenadas obtenidas. Podemos indicarle que inserte un marcador en ese punto mediante map.addMarker.

Para que resulte más fácil de entender vamos a incluir a continuación el código utilizado al completo.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GMaps.js &mdash; Geolocation</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="gmaps.js"></script>
  
  <style type="text/css">
  #map{
  display: block;
  width: 100%;
  height: 600px;
  margin: 0 auto;
  -moz-box-shadow: 0px 5px 20px #ccc;
  -webkit-box-shadow: 0px 5px 20px #ccc;
  box-shadow: 0px 5px 20px #ccc;
}
  </style>
  <script type="text/javascript">
    var map, lat, lng;
    $(document).ready(function(){
      //creamos el mapa
      var map = new GMaps({
        el: '#map',
        lat: 0,
        lng: 0
      });
      // Creamos la geolocalización
      GMaps.geolocate({
        success: function(position){
          lat = position.coords.latitude;  
          lng = position.coords.longitude;
          //Definimos la vista del mapa sobre las coordenadas obtenidas
          map.setCenter(lat, lng);
          //Añadimos un marcador
          map.addMarker({ lat: lat, lng: lng});  
        },
        error: function(error){
          alert('Geolocation failed: '+error.message);
        },
        not_supported: function(){
          alert("Your browser does not support geolocation");
        }
      });
    });


  </script>
</head>
<body>
  <h1>GMaps.js &mdash; Geolocation</h1>
  <div id="map"></div>
  
</body>
</html>

Como se puede observar en el código anterior hemos añadido en la cabecera del html una definición de estilos css para #map.

Cálculo de rutas

Podemos completar el ejemplo anterior añadiendo una mejora al mapa. Podemos hacer que cuando el usuario haga clic sobre algún punto del mapa se nos muestre la ruta entre su posición y el punto seleccionado. Esto lo conseguimos con el método .drawRoute. Al código que ya tenemos escrito debemos añadir la siguiente función:

map.addListener('click', function(e) {
          map.drawRoute({
          origin: [lat, lng],  
          destination: [e.latLng.lat(), e.latLng.lng()],
          travelMode: 'driving',
          strokeColor: '#000000',
          strokeOpacity: 0.6,
          strokeWeight: 5
        });
          lat = e.latLng.lat();   
          lng = e.latLng.lng();

       map.addMarker({lat: lat, lng: lng});  
        });

Como vemos, en primer lugar creamos un evento ‘click’ que tome las coordenadas del punto que hemos seleccionado. Con map.drawRoute obtendremos la ruta entre el punto inicial, en este caso la posición inicial (origin) y el seleccionado (destination). La opción travelMode nos permite seleccionar el medio de trasporte elegido para el desplazamiento: driving, bicycling o walking. Por defecto es walking. Para hacer que nos dibuje un marcador en el punto del mapa seleccionado añadimos un marcado.

Gmaps.js

Mostrando las direcciones de la ruta

Con una sencilla modificación se puede conseguir que el mapa nos muestre las direcciones seguidas por la ruta seleccionada, de tal manera que nos indique los cambios de dirección, nombres de las vías, distancias y tiempos del recorrido. Además podemos arrastrar los marcadores que señalizan el inicio y el final de la ruta para modificar el recorrido dinámicamante. Todo esto se hace cambiando el método .drawRoute por .renderRoute. Eso sí, tenemos que añadir un nuevo id para que nos cree la ventana con el desplegable de las rutas. En el ejemplo lo hemos llamado <div id=»directions»></div>.

A continuación se muestra el mapa que hemos obtenido:

El código es el siguiente:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GMaps.js &mdash; Geolocation</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="gmaps.js"></script>
  <!-- <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" /> -->
  <!-- <link rel="stylesheet" type="text/css" href="examples.css" /> -->
  <style type="text/css">
  #map{
  display: block;
  width: 100%;
  height: 600px;
  margin: 0 auto;
  -moz-box-shadow: 0px 5px 20px #ccc;
  -webkit-box-shadow: 0px 5px 20px #ccc;
  box-shadow: 0px 5px 20px #ccc;
}
  </style>
  <script type="text/javascript">
    var map, lat, lng;
    $(document).ready(function(){
      var map = new GMaps({
        el: '#map',
        lat: 0,
        lng: 0
      });

      GMaps.geolocate({
        success: function(position){
          lat = position.coords.latitude;  
          lng = position.coords.longitude;
          map.setCenter(lat, lng);
          map.addMarker({ lat: lat, lng: lng});  
        },
        error: function(error){
          alert('Geolocation failed: '+error.message);
        },
        not_supported: function(){
          alert("Your browser does not support geolocation");
        }
      });

      map.addListener('click', function(e) {
          map.renderRoute({
          origin: [lat, lng],  
          destination: [e.latLng.lat(), e.latLng.lng()],
          travelMode: 'driving',
          strokeColor: '#000000',
          strokeOpacity: 0.6,
          strokeWeight: 5
          }, {
        panel: '#directions',
        draggable: true
        });
          lat = e.latLng.lat();   
        lng = e.latLng.lng();
        //Crea un marcador en el punto final automaticamente

        });

    });


  </script>
</head>
<body>
  <h1>GMaps.js &mdash; Muestra direcciones de la rutas</h1>
  <div id="map"></div>
  <div id="directions"></div>
  
</body>
</html>

Conclusiones

Como hemos visto GMaps.js es una herramienta muy sencilla y fácil de utilizar. Nos permite acceder a muchos de los recursos de Google Maps como son sus bases de datos de direcciones, rutas y elevaciones. Creo en consecuencia que puede ser muy útil para incorporar mapas a aquellas páginas web que necesiten incorporar un mapa con geolocalización o cálculo de rutas.

Sin embargo, para realizar un visor web Gmaps.js puede quedarse un poco «pequeño», en cuyo caso debemos acudir a librerías JavaScrip genéricas, como puede ser Google Maps API JavaScript o preferente las de software libre como Leaflet u OpenLayers.

2 comentarios en «GMaps.js: una forma muy fácil de publicar mapas en la web»

Los comentarios están cerrados.