Insertar Google Maps en tu web es fácil con Gmaps.js

El API de Google Maps es muy completo. Permite desde incluir mapas en tu sitio web hasta geolocalización HTML5, poligonos, rutas, etc.

El problema es su complejidad. Google Maps API v3 está inspirado en Java, mientras que Javascript es más conocido por su estilo idiomático, simple y directo. La complejidad también hace que personas no tan expertas en programación prefieran insertarlo como iframe (ugh) y simplemente no aprender mapas.

HPNeo y Yaraher de Xenda liberaron hoy Gmaps.js, un proyecto que apunta a reimplementar todo el poder del API de Google Maps con la simpleza de jQuery y Javascript.

Insertar un mapa simple con Gmaps.js

Creas en tu HTML algún div con el tamaño del mapa que quieres, llamalo "pony", luego en el header insertas jQuery, el API de Maps y Gmaps.js:

Código :

<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>

Y por último, el código del mapa

Código :

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

Y ya está. Por defecto el zoom es de 15, pero puedes cambiarlo agregando "zoom" a los parámetros iniciales.



Los ejemplos de lo que puedes hacer son muchisimos. Polígonos, rutas estilo GPS, eventos del mapa entre muchos otros.

Uno básico es agregar markers al mapa. Al código de arriba le agregamos esto y ya está:

Código :

map.addMarker({
  lat: -12.043333,
  lng: -77.028333,
  title: 'Lima',
  click: function(e) {
    alert('You clicked in this marker');
  }
});

Nota para Gmaps.js ¿Podrían mejorar su sitio web por favor?

Entiendo que lanzar es importante, que la velocidad es clave y que querían ser publicos ya, pero hay un par de arreglos super sencillos y hasta obvios que aumentarían increiblemente la cantidad de personas que pueden impactar.

• ¿Por qué el logo al darle click, estando en "examples", lleva a "examples"!? La única forma que encontré de descargar Gmaps.js desde Hacker News fue cambiar la URL a mano.
  
• En todas las URLs del sitio debería estar el enlace para descargar y para verlo en Github. En todas.
  
• No mataría especificar en algún lado que se requiere embeber el API de Maps y luego el de Gmap.js. Miren como lo hace Gmap3.

Eso es todo, un excelente proyecto. Puedes seguirlo en Github para enterarte de todos los cambios. Felicidades a [url=https://twitter.com/#!/yaraher]Yaraher[/url] y a [url=https://twitter.com/#!/hpneo]HPNeo[/url].

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.