Instalando librerías con NPM (Google Maps)

Instalar librerías de terceros en Angular es clave para escalar proyectos con confianza. Aquí verás cómo integrar Angular Google Maps: desde la instalación con npm y el import del AGM core module, hasta la configuración de la API key, el data binding de lat y lng, y los estilos en CSS para mostrar el mapa sin errores.

¿Cómo instalar Angular Google Maps con npm?

Para comenzar, se visita la guía en angular-maps.com, sección Getting Started, apartado “Setting up Angular Google Maps”. La instalación se hace con npm (como con Angular CLI). Ejecuta el comando en la terminal dentro del folder del proyecto.

• Ir a la guía oficial y copiar el comando de instalación.
• Ejecutarlo en la terminal del proyecto; si tu entorno lo requiere, anteponer sudo.
• Esperar a que el módulo quede instalado.

Comando de ejemplo:

sudo npm install angular-google-maps/core --save

¿Cómo inicializar el módulo y la API key en Angular?

Abre el archivo appmodule.ts en la carpeta source/app. Según la guía, hay que hacer el import del AGM core module y agregarlo al array de imports. Este módulo se inicializa con una API key de Google.

• Copiar el import y agregar el módulo en imports.
• Hacer la inicialización con parámetros, en este caso la API key.
• Obtener la clave desde el enlace “get a key”, crear el proyecto (p. ej., “Platzi Square”) y copiar la clave.
• Reemplazar la clave de ejemplo por la real en el código.

Fragmentos de configuración:

// appmodule.ts
import { AgmCoreModule } from 'angular-google-maps/core';

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'TU_API_KEY_DE_GOOGLE'
    })
  ]
})
export class AppModule {}

¿Cómo mostrar el mapa, enlazar lat/lng y ajustar estilos?

Desde la guía, copia el HTML del mapa y pégalo en app.component.html (arriba de la lista sin ordenar). Observa el data binding de atributos: [latitude] y [longitude] usan las variables lat y lng. Decláralas en app.component.ts y asígnales valores.

• Pegar el template del mapa con el marcador.
• Declarar variables lat y lng como number en app.component.ts.
• Obtener coordenadas desde Google Maps: en la URL, después de la arroba, la primera es latitud y la segunda longitud. Copiarlas y asignarlas.
• Si el mapa no aparece tras el refresh, define altura al elemento agm-map en styles.css (por ejemplo, 300 píxeles).

HTML del mapa y marcador:

<!-- app.component.html -->
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

<!-- Aquí tu lista sin ordenar (UL) va debajo -->

Variables en el componente:

// app.component.ts
export class AppComponent {
  lat: number = 19.4326; // Ejemplo: latitud.
  lng: number = -99.1332; // Ejemplo: longitud.
}

Estilos globales:

/* styles.css */
agm-map {
  height: 300px;
}

¿Qué ejercicio refuerza ngFor y ngIf?

Para cerrar los conceptos básicos, se propone crear una lista de personas con nombre y edad, mostrarla en una UL de HTML y renderizar solo a quienes sean mayores de edad usando ngFor y ngIf. Comparte tu solución en la caja de comentarios a la derecha.

• Crear arreglo de personas con nombre y edad.
• Iterar con ngFor y filtrar con ngIf a mayores de edad.
• Mostrar en una UL.

¿Ya integraste el mapa y resolviste el reto de ngFor/ngIf? Cuéntame en los comentarios cómo lo lograste y qué dudas te surgieron.