Como usar el Componente Google Maps de Angular 9

Angular Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

Angular 9 trajo consigo muchas novedades y características que hacen más productivo al Desarrollador que usa este Framework para crear sus proyectos, hay 2 componentes que trajo esta versión de Angular, uno es el componente YouTube y el otro componente es Google Maps y en este Post te enseñare como usar e implementar un mapa de Google con este componente, vamos con ello.

Antes de continuar, te invito a leer los siguientes artículos para que estés familiarizado con este tutorial:

Asimismo te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Como usar el Componente Google Maps de Angular 9.

Lo primero que haremos es crear un nuevo proyecto con Angular 9, ejecutando el siguiente comando:

Yo le he puesto el nombre appGoogleMaps a mi proyecto, tu puedes darle el nombre que desees.

Ahora instalo el componente oficial Google Maps de Angular 9, ejecutando el siguiente comando:

Después de crear el nuevo proyecto, se me ha creado un conjunto de directorios y archivos, abro el archivo app.module.ts, este archivo se encuentra en appGoogleMaps > src > app > app.module.ts

Dentro del archivo app.module.ts agrego lo siguiente (En este archivo llamo a Google Maps de Angular 9)

Paso seguido abro el archivo app.component.ts que se encuentra en appGoogleMaps > src > app > app.component.ts

Dentro del archivo app.component.ts debo colocar los métodos tal cual estan en la API de Google Maps (JavaScript) para que pueda funcionar nuestro mapa, agrego lo siguiente.

Por último abro el archivo app.component.html que se encuentra en appGoogleMaps > src > app > app.component.html

En el archivo app.component.html el cual es el archivo HTML del proyecto, agrego lo siguiente:

Por último debo colocar mi API KEY de Google Maps, para esto abrimos el archivo index.html que se encuentra en appGoogleMaps > src > index.html

Ahora corro el servido de Angular ejecutando el siguiente comando:

Y obtengo el mapa de Google (Estoy usando la plantilla HTML por defecto que me brinda Angular al crear un proyecto)

Bueno con esto tenemos listo un mapa de Google, si deseas saber más sobre el componente Google Maps de Angular 9, puedes visitar su repositorio oficial en GitHub.

Conclusión

Hay distintos paquetes que te permiten crear un Mapa de Google en Angular, pero todos son paquetes de terceros, en cambios Angular 9 trae un paquete nativo y oficial que es lo recomendable usar, ya que este paquete ha sido testeado por los Desarrolladores de Angular para que funcione sin generar problemas con Angular 9.

Nota

  • Los pasos mencionadas y el código utilizado en este Post pueden ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a Angular.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos. 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
4 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Lautaro
Lautaro
2 meses atrás

Sos un genio viejo! No es la primera vez que me salvas con este post. Mil gracias por tu aporte, te tengo en favoritos.

Alex
Alex
30 días atrás

Muy Buen Tutorial! Una pregunta se le puede poner marcas al mapa?