Problemas técnicos 1/8: Mapas y Localización

GeoCoder en Ruby on Rails

Steve Richey — Unsplash.com

Localizar eventos en un mapa

Es muy común que las aplicaciones muestren un mapa ya sea dinámico o estático con información sobre lugares. Para esto Ruby on Rails tiene una gema que se llama GeoCoder con la que podremos hacer más fácil localizar eventos en un mapa.

¿Cómo funciona Geo Coder?

1- Instalar la gema en GemFile

gem 'geocoder'

2- Añadir al modelo que quieras localizar en un mapa la Longitud y la Latitude. Es importante darles valor de :float para que puedas incluir decimales en estos campos.

rails g migration AddAttributtesToStore latitude:float longitude:float address:string
rake db:migrate

3.- Después en el modelo tienes que especificar de dónde la gema GeoCoder va a obtener la información para buscar la latitud y longitud y la va a guardar. Para esto en nuestro modelo (Store en este caso, app/models/store.rb), debemos especificar esta información:

class Store < ActiveRecord::Base
geocoded_by :address
after_validation :geocode, if: :address_changed?
end

Esto hace que después de verificar la información obtenida en :address va a buscar en Google Maps si hay alguna longitud y latitud relacionada y si hay, la va a guardar en los campos de :longitude y :latitude. Con esto tendremos registrado nuestra ubicación para ponerla en un mapa.

¿Cómo mostrar la información en un mapa?

Lo primero que tenemos que hacer es ir la cuenta de desarrolladores de Google y obtener una CLAVE API en este link →.

Si lo que queremos es mostrarla en nuestra acción Show del controlador Stores (app/views/stores/show.html.erb), lo que tenemos que hacer es dentro del body crear un <div> con el id del mapa.

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

Después darle estilo de Css para que se visualice. Es importante porque si no se le da estos valores, el mapa no se visualiza.

#map {
width: 100%;
height: 300px;
}

Y por último hay que incluir el código de Javascript con toda la lógica para que mapa se visualice con nuestro marcador.

<script>
function initMap() {
var myLatLng = {lat: <%= @store.latitude %>, lng: <%= @store.longitude %>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: '@store.name'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURGOOGLEAPIKEY&signed_in=true&callback=initMap"></script>

Con este código podremos visualizar un marcador con nuestra tienda en un mapa. Les recomiendo leer la documentación de google donde enseña como usar todos los diferentes tipos de mapas, hay algunos más dinámicos para calcular distación, para obtener la ubicación actual, para unir puntos, etc. 
Más información, aquí →