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

June 18, 2021

Share

Table of contents

Quick Access

Hoy te explicaremos en este artículo cómo usar google maps dentro de una aplicación en AngularJS, para eso te guiaré paso a paso para finalmente lograr un mapa implementado exitosamente

 

Requisitos previos: 

 

 - Saber algo sobre javascript o AngularJS, y solo para su información, aquí está la guía maestra para
   AngularJS (https://github.com/johnpapa/angular-styleguide)
 - Tener lógica de programación
 - Conocer algo de HTML
 - Es preferible utilizar el generador "Yeoman"
 - Manejo de bower y npm entre otros

 

Una vez que especifique esto, estamos listos para comenzar nuestro pequeño viaje a través de este artículo.

 

Instale yeoman en nuestro entorno: 

Para este ejemplo, estoy usando la distribución de Linux, Ubuntu 14.04 LTS, que considero muy buena si eres un desarrollador web, sin embargo, puedes usar cualquier sistema operativo de tu elección, pero este ejemplo está hecho especialmente para aquellos que usan Ubuntu 14.04 LTS. antes de instalar el generador Yeoman, también necesita instalar en su carpeta de trabajo, ciertas herramientas de administración. use el siguiente comando, primero verificamos si en nuestra carpeta de trabajo instalamos el administrador de paquetes npm


      node --version && npm --version

si la versión de node y npm parece muy desactualizada, podemos llevarla a la última versión disponible:

       npm install --global npm @ latest

Una vez listo, proceda a instalar el generador

    npm install --global yo bower grunt-cli

 

** nota: ** si muestra errores al intentar instalar, sería preferible utilizar un superusuario.
Para verificar que la instalación de nuestro generador de yeoman fue exitosa, ejecute el siguiente comando:

 

    yo --version && bower --version && gruñido --version

 

Si nos da la versión de Yeoman Generator, Manager y Grunt Bower Automator, entonces habremos completado con éxito la instalación de nuestras herramientas.

 

AngularJS instalando el generador en Yeoman 


Ahora instalaremos en el entorno Yeoman, generador de AngularJS, para eso usamos este comando:


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

 

¿Cómo saber si se instaló el generador AngularJS?
simple, hay que escribir:

       yo

 

esto nos lleva a una tabla de opciones donde podemos elegir entre diferentes funcionalidades

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_001.png)

 

Una vez escrito este comando, el oficial nos preguntará ¿qué queremos hacer ?, literalmente. Elegiremos la opción Angular

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_002.png)

 

Ahora, nos preguntas si queremos agregar funcionalidad adicional, para este ejemplo agregamos todas las opciones disponibles.

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_003.png)

 

nota: estos procesos pueden llevar algún tiempo, sugiero algo de paciencia.

 

Estando en esta parte de la instalación, le preguntamos si desea sobrescribir el package.json, donde deberíamos decir que sí.

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_004.png)

 

Ya hecho esto, tenemos una aplicación lista para empezar a trabajar. En la estructura de nuestro proyecto, deberíamos ver una serie de carpetas de la siguiente manera:

 

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_005.png)

 

lo que significa que hemos creado un proyecto en AngularJS, listo para trabajar. ¿Cómo comprobar que está funcionando nuestro proyecto? en la línea de comando, que se encuentra en la carpeta de trabajo, ejecute el comando:

      grunt server

 

si todo se instaló correctamente, aparece una pantalla como esta

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_008.png)

 

Aprovechando las bibliotecas disponibles para mapas AngularJS: 
Una de las ventajas de usar AngularJS es que existen muchas bibliotecas para implementar cualquier funcionalidad que necesitemos en nuestro proyecto, y el uso de mapas interactivos no es una excepción a este caso usamos la biblioteca ngMap (http://ngmap.github.io /)

 

Lo cual en mi opinión me ha resultado muy útil, fácil de manejar, buena documentación y no se requiere ser tan experto para implementar nuestro proyecto. Además, dado que estamos usando Yeoman, usamos una de las características de yeoman, la capacidad de instalar paquetes bower, y te preguntas ¿qué es ?, para aquellos que leen por primera vez el término "bower" es un administrador de dependencias para el frontend. desarrollo web, lo que facilita la instalación de bibliotecas y marcos en nuestro proyecto (para obtener más información, visite http://bower.io/)

 

ahora nos dedicamos a instalar el paquete php a través de bower, si no estás muy seguro de cómo me veo puedes ejecutar el siguiente comando:

 

      bower busca "nombre_del_paquete"

 

en nuestro caso sería:

      bower búsqueda ngmap

 

en la lista de posibles opciones, este sería el paquete a buscar:
 
 ngmap https://github.com/allenhwkim/angularjs-google-maps.git

 

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_006.png)

para instalarlo escriba el siguiente comando:

       bower install ngmap --save

 

el prefijo --save nos coloca automáticamente en la llamada javascript de index.html que contiene ngmap, esto nos evitaría tener que manualmente instalarlo, ya que olvidar la instanciación podría darnos un dolor de cabeza si se detecta un error de este tipo.
Para no poner el "--save" tendríamos que ir al archivo index.html que se encuentra en nuestra estructura de nuestro proyecto e instanciar el paquete descargado usando la siguiente línea de código

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

 

Ya hecho esto veremos si funciona nuestro paquete nmap. Un punto importante que siempre debemos recordar para instalar un paquete ya sea por bower, npm o manualmente, es agregarlo al controlador principal de nuestra aplicación para esto nos dirigiremos al archivo principal, su ruta sería la siguiente

    nombre_del_proyecto / public / js / app.js

 

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_007.png)

Una vez que se agrega el prefijo "gMap" en el archivo app.js, estamos listos para trabajar con cualquier funcionalidad ofrecida por la biblioteca ngMap en nuestra aplicación.

 

Ng-map usando nuestra aplicación

 

ahora procedamos a usar la librería gMap directamente, para eso vamos a la siguiente ruta:

      "Nombre del proyecto / app / index.html"

 

estando en este documento, podemos editarlo a nuestro gusto, en mi caso, primero borrar todo el contenido, así

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_009.png)

    
Ahora agregue algunas líneas para habilitar un mapa simple, nos dirigimos a la siguiente ruta
 

     nombre del proyecto / app / views / main.html

 

Ahora edite el archivo de la siguiente manera

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_011.png)

 

donde centro, son las coordenadas donde desea que comience el mapa, el zoom es la cantidad con la que se habrá ampliado el mapa para comenzar, y el estilo predeterminado es un dato booleano que nos pregunta si tenemos el mapa de estilo preestablecido.

 

y el archivo del controlador se vuelve a escribir de la siguiente manera, siguiendo la ruta.

     nombre del proyecto / app / scripts / controller / main.js

 

y modificar el archivo, tal y como presento en este ejemplo

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_012.png)

 

finalmente obtenemos una pantalla como esta:

! [ingrese la descripción de la imagen aquí] (/ sites / default / files / blog / img / seleccion_013.png)

 

Espero que les haya gustado este tutorial, espero que les sea de mucha ayuda y también puedan ver lo útiles que son las tecnologías libres, les será hasta el próximo, saludos.