Cómo usar Google Maps dentro de una app en AngularJS

En este artículo, te explicaremos paso a paso cómo integrar Google Maps en una aplicación AngularJS. Al final, habrás implementado un mapa de manera exitosa.

Requisitos Previos

Antes de comenzar, es importante tener en cuenta algunos conocimientos y herramientas:

• Conocimientos básicos de JavaScript o AngularJS. Te recomiendo esta guía maestra de AngularJS: Guía de AngularJS.
• Lógica de programación básica.
• Conocimientos de HTML.
• Es preferible utilizar el generador "Yeoman".
• Familiaridad con bower y npm, entre otras herramientas.

Con estos requisitos en mente, estamos listos para empezar.

Instalación de Yeoman en Nuestro Entorno

Para este ejemplo, utilizaremos la distribución de Linux, Ubuntu 14.04 LTS, aunque puedes usar cualquier sistema operativo. Sin embargo, este tutorial está especialmente diseñado para Ubuntu 14.04 LTS.

Verificar e Instalar npm

Antes de instalar Yeoman, es necesario asegurarse de que el administrador de paquetes npm está instalado en tu sistema. Para hacerlo, ejecuta el siguiente comando:

node --version && npm --version

Si la versión de node o npm está desactualizada, actualízalas con el siguiente comando:

npm install --global npm@latest

Instalar Yeoman

Una vez actualizado npm, procede a instalar Yeoman junto con otras herramientas necesarias:

npm install --global yo bower grunt-cli

Nota: Si encuentras errores durante la instalación, ejecuta el comando con permisos de superusuario (sudo).

Para verificar si la instalación fue exitosa, ejecuta:

yo --version && bower --version && grunt --version

Si ves las versiones de Yeoman, Bower y Grunt, significa que la instalación fue exitosa.

Instalación del Generador AngularJS en Yeoman

Ahora, instalaremos el generador de AngularJS en Yeoman usando el siguiente comando:

npm install --global generator-angular@0.11.1 generator-karma

Comprobar la Instalación

Para verificar que se haya instalado correctamente, escribe:

yo

Esto abrirá un menú con varias opciones. Selecciona la opción Angular para continuar con la instalación.

Luego, se te preguntará si deseas agregar funcionalidades adicionales. Para este ejemplo, selecciona todas las opciones disponibles.

Nota: Estos procesos pueden tardar unos minutos, ten paciencia.

En este punto, se te preguntará si deseas sobrescribir el archivo package.json. Selecciona Sí.

Estructura del Proyecto

Después de completar estos pasos, tendrás una aplicación AngularJS lista para trabajar. La estructura de tu proyecto debería verse de la siguiente manera:

Para comprobar si el proyecto funciona correctamente, ejecuta en la línea de comandos:

grunt server

Aprovechando Bibliotecas para Mapas en AngularJS

AngularJS cuenta con varias bibliotecas para implementar mapas interactivos. En este caso, utilizaremos ngMap: ngMap. Esta biblioteca es fácil de usar, bien documentada y no requiere conocimientos avanzados para su implementación.

Instalación de ngMap

Como estamos utilizando Yeoman, podemos aprovechar su integración con Bower para instalar bibliotecas. Para instalar ngMap, usa el siguiente comando:

bower install ngmap --save

El prefijo --save agrega automáticamente la referencia a ngmap en el archivo index.html, evitando hacerlo manualmente.

Si prefieres hacerlo manualmente, agrega esta línea en el archivo index.html:

<script src="bower_components/ngmap/build/scripts/ng-map.js"></script>

Configuración del Controlador

Es importante agregar el prefijo gMap en el archivo app.js de nuestra aplicación. La ruta sería:

nombre_del_proyecto/public/js/app.js

Usando ngMap en Nuestra Aplicación

Para utilizar la biblioteca, ve al archivo:

nombre_del_proyecto/app/index.html
    

Edita el contenido para configurar un mapa simple. También edita:

nombre_del_proyecto/app/views/main.html
    

Aquí, define las coordenadas del centro, el nivel de zoom, y otras configuraciones básicas para el mapa.

Finalmente, ajusta el archivo del controlador en:

nombre_del_proyecto/app/scripts/controller/main.js
    

Conclusión

Espero que este tutorial te haya sido útil y te motive a aprovechar las tecnologías libres para tus proyectos. ¡Hasta el próximo artículo!

Te recomendamos este video