Cómo integrar Google Maps en Angular de forma sencilla

Aprende cómo agregar Google Maps de forma sencilla en Angular para crear mapas simples.

Aviso: Asumo que tienes ya tus API Keys de Google Maps y tienes considerado el precio y facturación en mente, para obtenerla pueden seguir los pasos en este enlace (inglés): https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key

Para integrar GMaps a nuestra app, ya existe una dependencia muy buena, gratuita y sobre todo completa ya que no se queda solo en la implementación de GMaps base, si no que incluye algunas otras opciones como para marcados masivos.

Esta dependencia se llama “Angular Google Maps” (¿qué originales cierto?), o reducido “AGM”, lo primero que hay que hacer es instalar su core, que es el paquete que nos abrirá las puertas a Google Maps y a los módulos adicionales que podremos instalar, para ello vamos a ejecutar el comando:

npm install @agm/core --save

Ahora, vamos a configurar nuestro módulo, para ello abrimos nuestro app.module.ts o en su defecto el módulo donde necesitamos utilizar Google Maps (puede usarse en Lazy Modules sin problemas).

Como es costumbre, vamos a importar el módulo dentro de este con el código:

...
import { AgmCoreModule } from '@agm/core';
...

Y después vamos a cargarlo en los imports:

imports: [
   ...
   AgmCoreModule.forRoot({
      apiKey: 'TU_API_KEY'    
   })
   ...
]

En esta parte, notamos la frase TU_API_KEY esta hay que sustituirla por la API KEY que obtuvimos desde GMaps.

Como aviso adicional, recuerden 3 cosas:

  1. Necesitan darle permisos a la API KEY para funcionar en localhost:4200
  2. Necesitan tener habilitada la facturación.
  3. Cada vez que hagan un cambio que muestre el mapa, se les descontará una petición así que trabajen con cuidado si dejarán esto ya puesto y listo.

Ahora necesitamos llamar agm en nuestra vista, para ello abrimos la vista donde queremos que vaya nuestro mapa (por ejemplo: app.component.html ) y vamos a agregar nuestro código:

<agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng">
  <agm-marker  [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

Con esto ya tendremos implementado el estilo, pero nos dará un error, no tenemos las variables lat, lng, zoom habilitadas, para ello conseguiremos las latitudes, longitudes y el zoom que querramos en un mapa de Google (o si ya las tenemos pues desde nuestro back o donde gusten) y las asignaremos en nuestro componente, ejemplo:

export class AppComponent {
   lat = 19.290950;
   lng = -99.653015;
   zoom = 9;
}

Y para finalizar, al agm-map le daremos un ancho y alto fixeado, esto ya es algo propio de sus estilos, pero para poder verlo, lo asignaremos así por ahora:

agm-map {
   width: 500px;
   height: 500px;
}

Y listo, ya podremos ver nuestro mapa.

Extra:

AGM incluye un módulo para cluster de marcas que podemos instalar con:

npm install @agm/js-marker-clusterer

Y después utilizarlo de la siguiente forma:

<agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng">
                  <agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
                    <agm-marker *ngFor="let marker of markers" [latitude]="markers.lat" [longitude]="markers.lng"></agm-marker>
                  </agm-marker-cluster>
</agm-map>

Aquí yo agregué un *ngFor de una lista de marcadores, para que el cluster funcione se requieren varios marcadores que los combine en un cluster, en este caso les será útil si por ejemplo los traen desde un API y necesitan mostrar muchos marcadores. A su vez, también consideren descargar las imágenes de la imagePath para tenerlos en local y no en GitHub y se integran tipo /assets/img/maps/m (sin nombre ni extensión solo hasta /m por ejemplo)

Recuerden implementar el módulo con:

import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';

Y en sus imports.

Nos vemos en el siguiente tutorial.

¿Cuál es tu reacción?
+1
0
+1
0
+1
0
+1
1
+1
1
Total
0
Shares
Publicación anterior

Realizando pruebas básicas de estrés con JMeter

Siguiente Publicación

Creando una tabla paginada con back-end (server-side) en Angular

Publicaciones Relacionadas