Google Form + Google Fusion Table + Google Map

Usando estas tres tecnologías de Google podemos, en poco tiempo, hacer un mapa con puntos geolocalizados y un formulario para dar de alta nuevos puntos.

El Workflow sería el siguiente:

1- Lleno un formulario con información + una dirección que quiero geolocalizar en un mapa.
2- La información del formulario se guarda en una planilla, a esta planilla le asociamos un script de sincronización que se ejecuta cada vez que se guarda un nuevo registro.
3- El script pasa la dirección del formulario a coordenadas y guarda la información en una tabla de Fusion Table.
4- El mapa de Google está conectado a la tabla de Fusion Table y muestra los registros como puntos en el mapa.

Paso a paso

El artículo original del cual nos guiamos para esto es https://fusion-tables-api-samples.googlecode.com/svn/trunk/FusionTablesFormSync/docs/reference.html.

Nosotros vamos a agregar unas capturas para que quede mas claro y algunos detalles extras.

1- Creamos el formulario (Nuevo > Formularios de Google) con un campo para que se ingrese la dirección

Captura de pantalla de 2015-05-11 14:46:53

2- Indicamos que el resultado del formulario tiene que tener como destino una planilla  de cálculo (Resultados–>Elegir destino de las respuestas…)

Captura de pantalla de 2015-05-11 14:56:32

3- Creamos una tabla de Fusion Table (Nuevo > Crear tabla dinámica). Y le decimos que se cree importando los datos de la planilla de cálculo que creamos en el paso anterior.

Captura de pantalla de 2015-05-11 15:03:40

4- Agregamos una nueva columna de tipo Location a donde van a ir a parar las coordenadas correspondientes de la dirección.

5- En la planilla de cálculo creamos un nuevo script (Herramientas > Administrador de secuencias de comandos > Crear secuencia de comandos para Proyecto en blanco)

6- En el editor de script vamos a Propiedades de proyecto y agregamos tres propiedades de la secuencia de comandos:
docid: el ID de la tabla de Fusion Table.
latlngColumn el nombre de la columna de la tabla que agregamos (Tipo Location).
addressColumn nombre de la columna de la planilla donde se guarda la dirección que se carga en el formulario.

Captura de pantalla de 2015-05-11 15:22:067- En el editor de script ir a Recursos > Proyecto de Developers Console crear un nuevo proyecto y habilitar el uso de Fusion Table. Acá explican mejor https://developers.google.com/apps-script/guides/services/advanced#enabling_advanced_services

8- Vamos a copiar ahora el script que va hacer “la magia”, va a convertir la dirección a coordenadas y va a pasar los datos de la planilla de cálculo a Fusion Table. Copiar/Pegar de acá: https://fusion-tables-api-samples.googlecode.com/svn/trunk/FusionTablesFormSync/src/formsync.js (así cualquiera) y guardar.

9- Ahora hay que darle permiso al script para que trabaje con la tabla de Fusion Table. Para eso vamos a Ejecutar > checkAuthorization y darle continuar.

10- Ya tenemos el formulario con la planilla de cálculo, la tabla de fusión table y el script mágico, nos falta el evento que va a generar que se ejecute el script. Para eso, en el editor de script, vamos a Recursos > Activadores del proyecto activo y agregamos el evento onFormSubmit de la planilla cuando se envía el formulario.

Captura de pantalla de 2015-05-11 15:50:59

LISTO, cuando le damos enviar al formulario, se agrega un nuevo registro en la planilla de cálculo, esto ejecuta el script el cual convierte la dirección a coordenadas y agrega el nuevo campo a la tabla de Fusion Table, solo nos queda levantar es tabla desde google map.

Captura de pantalla de 2015-05-11 16:02:41

Mostrar en un mapa los puntos de una tabla geolocalizada de Fusion Table

Acá lo explican muy simple: https://developers.google.com/maps/documentation/javascript/examples/layer-fusiontables-simple?hl=es

En nuestro caso Geocodable address será el nombre de la columna de tipo Location y from el id de la tabla.

layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });

y listo

Captura de pantalla de 2015-05-11 16:01:23

 

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>