#angular
Inspirado por la implementación de Starbucks, he utilizado la librería oficial de Google para Angular, logrando un mapa interactivo que destaca al interactuar con sus marcadores. En mi proyecto de e-commerce, creé una página de "Locations" donde añadí ubicaciones a través de un servicio en Angular y conecté una API que genera ubicaciones aleatorias. Te explico cómo generé una API Key en Google Cloud Console y habilité la API de Maps JavaScript, además de cómo configuré el mapa usando Signals, una nueva característica de Angular. Los marcadores avanzados y el componente MapAdvancedMarker fueron cruciales en esta integración, permitiendo interactividad entre la lista y el mapa. Esta guía es tu puerta de entrada a una integración fluida y eficiente de Google Maps en Angular.
00:00 Introducción
00:25 Caso de ejemplo
02:01 Código base
06:21 API de locations
07:46 Conexión a API
11:35 @angular/google-maps
13:55 Instalando la lib
14:42 API KEY de Google Maps
18:36 Cargando la API
19:33 Creando el mapa
25:37 Controlando el zoom
28:03 Implementando markers
32:10 Generando Map ID
36:14 Implementando InfoWindow
44:21 Contenido dinámico
47:25 Usando viewChildren
54:00 Conclusiones
🌐 Mis redes
Instagram: https://www.instagram.com/nicobytes/
Twitter: https://twitter.com/nicobytes
Github: https://github.com/nicobytes
Facebook: https://fb.com/nicobytes
WebSite: https://nicobytes.com
