Mostrar el historial de ruta (GMaps) como reproductor.
Descripción.-
Javascript, es un lenguaje que gusta mucho. Debido a que puedes dar "vida" a una página web. Pero llevaba tiempo programando para entornos de escritorio, que lo dejé de lado. A modo de actualización, este ejemplo tiene uso de algunas de las nuevas características de la versión ES6.
De las que me han sido útiles al momento de escribir el código:
- Función Arrow
- let y const
- Template Strings
La función loadSteps3, tiene el código donde recuperamos las posiciones y lo cargamos a un arreglo. La página web, tiene un botón (start!) para iniciar el recorrido y otro para detenerlo.
El resultado será este:
Otra implementación que he usado, es el componente FileReader (HTML5). Para cargar el archivo de las posiciones.
¿Cómo obtener mis posiciones?
Para ello debemos exportar el historial de posiciones. Desde Google Maps (maps.google.com), en el menú hay que seleccionar la opción "Tus Rutas". Recomiendo seleccionar un rango de tiempo específico, pues la información que se genera será menor.
Luego, en el icono de la tuerca, la opción "Descargar una copia de todos tus datos". Para obtener el archivo en formato JSON, basta con seguir los pasos que se indican. El sistema enviará un email cuando el proceso termine.
Código Fuente.-
https://github.com/edgargs/ShowGMapsTimeline.git
Bibliografía.-
https://carlosazaustre.es/blog/ecmascript-6-el-nuevo-estandar-de-javascript/
http://stackoverflow.com/questions/3146483/html5-file-api-read-as-text-and-binary
https://www.html5rocks.com/en/tutorials/file/dndfiles/
http://www.proglogic.com/code/javascript/time/chronometer.php
Configuración.-
ES6
Google Maps API v3
Chrome 58.0.3029.110 (64-bit)
