StreetmusicMap parte 2: Integración Gmaps4Rails

Rubystas! Lo prometido aquí está. La segunda parte del tutorial del StreetMusicMap. Si quieres revisar la parte 1 de la historia, en donde explico como crear una relación uno a muchos uniendo 2 scaffolds “Musician” e “Instrument” te dejó por aquí el artículo.

En la segunda parte, vamos a integrar esa data que guardamos a traves del scaffold creado, para visualizarla de una forma entretenida e interactiva usando la gema gmaps4Rails.

Te sugiero que vayas por una buena taza de café antes de comenzar.

Instalando la gema geocoder.

Vamos a agregar la gema geocoder en mapa/Gemfile:

Luego en el terminal:

y reiniciamos el server con:

Geolocalizando a partir del campo “address”.

Abres app/models/Musician.rb y agregas esta línea:

En http://locahost:3000/musicians/new agregraremos 2 nuevos registros, dejamos vacíos los campos “latitude” y “longitude” . Luego te darás cuenta que al presionar “create musician” automáticamente se agregan valores. “Santiago Chile” en el campo address, obtendremos “-33.4367933” en latitude y “–70.64107299999” en longitude.

Geocoder es responsable de devolver las coordenadas como  “Response”  a partir de nuestra “Request” solicitada…Interesante..cierto?

pd:  si no sabes por qué aparece este belongs_to:instruments quizás necesitas revisar la parte 1 del tutorial en donde explico todo eso)

Instalando la gema Gmaps4rails.

Vamos a agregar la gema gmaps4rails en mapa/Gemfile:

Luego en el terminal:

y reiniciamos el server con:

 Agregando algunas referencias .js en la vista parcial application.html.erb.

Abrimos el archivo app/views/application.html.erb y agregamos el js de bootstrap, googlemap api y markerclustered ántes de </head>

 Agregando el div “Map” en fullScreen con Bootstrap.

Para dibujar el mapa en modo fullscreen (en cualquier dispositivo) me basé en este ejemplo disponible en Bootstrap examples.

No fue exactamente un copyPaste del ejemplo…tuve que modificar un poquito siguiendo estos pasos para adaptarlo a nuestro propósito.

Primero, agrega una referencia minificada de bootstrap.min.css antes de todas las referencias .js que incluimos en app/views/application.html.erb

Segundo, descargas  el archivo cover.css y lo guardas en app/assets/stylesheets/cover.css

Tercero,  buscas la linea en cover.css :

y la reemplazas por esta otra:

Tercero, abres app/views/musicians/index.html.erb y  dibujamos el <div id=”map”> que cargará el contenido de nuestro google map tal como la imagen

Musician Controller: Cargando los datos en el objeto @Hash.

En el controller musician  en app/controllers/musicians_controller.rb cargamos un objeto @hash y llamamos al método buid_markers() de la gema Gmaps4Rails. Este método  necesita un objeto en este caso lo cargamos con @musicians, el cual se comunica con el modelo a través de Musician.All devolviendo todos los registros de musicos que cargamos previamente.

Luego creamos el Marcador, damos su latitud, longitud y configuramos una ventana de información que se verá así.

Agregando el Script que dibuja el Mapa.

Ahora, inmediatamente después del html, vamos a añadir al final de app/views/musicians/index.html.erb  este script:

Lo que hace básicamente este script es construir el google Map.

Toda la data está contenida en el objeto @hash y  google map con su método .addMarkers  nos pide cargar un objeto “parseado a Json“.  Para lograr esto en ruby lo hacemos asi <%=raw @hash.to_json %>

Google Maps trabaja con JSON, un standard para el intercambio de datos,  con el fin de no atar su tecnología a un lenguaje de programación específico, sino que todo lo contrario, hacer que su tecnología sea compatible con cualquier lenguaje de programación con el que quieras trabajar.

Haz la prueba de imprimir por pantalla este código de ruby en la vista index:

Puedes notar que obtienes una cadena de texto entre varios corchetes [{…},{…}] cierto? bueno, es la misma data que ingresamos en musician/new pero parseada en formato JSON, y si copias esta cadena más abajo en un json-parser como el que encontré,  te mostrará la cadena en versión “bonita” y más legible.

Con estos pasos doy por finalizado el tutorial, para más personalizaciones como infoWindow, puedes revisar  mas ejemplos de  gmaps4rails o descargar el codigo fuente del tutorial desde el repo que comparto con ustedes en mi cuenta de Github.

Tenemos bastante más que podríamos integrar, pero hasta aquí es la base del “how to”  de este prototipo de mi proyecto streetmusicmap y es totalmente reusable con otros conceptos. Lo entretenido es saber que en un rato (o un fds) puedes sacar con Ruby on Rails y unas cuantas gemas utiles, prototipos que concretan todas esas locas buenas ideas :)

 Streetmusicmap.herokuapp.com

Written by Daniela Gattoni

Software Engineering Student at USM, Santiago, Chile. Web Designer & programmer. #hack4good Santiago 1st place 2014 with #BringYourCup app.

Leave a Comment

Your email address will not be published. Required fields are marked *