Muchas veces nos encontramos con problemas que no se pueden solucionar de forma directa, casi todo el mundo sabe como introducir un mapa de google en una web, pero cuando necesitamos que este mapa tenga más funcionalidades es cuando tenemos que empezar a utilizar la librería gmaps.js, con la cual podemos hacer multitud de mapas con rutas eventos en los clicks, áreas, y casi cualquier cosa que se nos pueda ocurrir, todo de forma sencilla y lo mejor es que se empieza a manejar en solo unos minutos debido a su documentación, ejemplos y a un sistema de pruebas del código online para ver si lo que estamos haciendo funciona o no.

Para acceder a esta librería tan solo hace falta entrar en su web: gmaps.js

En ella se encuentra toda la documentación necesaria para poder empezar a trabajar, y en el siguiente vídeo se aprende a hacer el uso básico de la misma:

 Aun así vamos a ver como funciona de forma sencilla.

Lo primero que hay que hacer es poner los enlaces a los archivos js:

<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="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>

A continuación se debe de introducir el css para nuestro div map que es donde se mostrará el mapa:

#map {
    display: block;
    width: 100%;
    height: 100%;
}

Seguimos introduciendo nuestro código jquery, en este caso pondremos dos marcadores y podremos ver como uno nos muestra un texto y el otro nos lleva a otra web.

<script>
$(document).ready(function(){
   	var map = new GMaps({
	    div: '#map',
	    lat: -12.043333,
	    lng: -77.028333
	});

	map.addMarker({
	  lat: -12.043333,
	  lng: -77.028333,
	  title: 'Lima',
	  icon: "icono.png",
	  click: function(e) {
	    alert('Has hecho click en el marcador');
	  }
	});
	map.addMarker({
	  lat: -12.943333,
	  lng: -77.528333,
	  icon: "icono.png",
	  title: 'patata',
	  click: function(e) {
	    window.location('https://mialto.es');
	  }
	});

});
</script>

Finalmente tan solo hace falta poner nuestro div en el código html:

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

Y obtendremos algo parecido a esto:

Como se puede observar es realmente sencillo y muy útil para hacer mapas con muchas funcionalidades