Instalar y configurar google maps en Angular 8

Hola a todos, hoy os voy a explicar como podemos instalar y configurar google maps en Angular 8.

Vamos a ver como podemos usar google maps en Angular 8 o menor.

Para ello, lo primero que necesitamos es obtener el API KEY para google maps. Te dejo un manual:

Obtener API KEY para google maps

Este ejemplo, esta hecho en la versión 8.2.14.

Lo primero que necesitamos es instalar el paquete @agm/core

También te recomiendo que instales el paquete @types/googlemaps

Puedes ver la documentación de este paquete aquí.

En el app.module, añadiremos el modulo de AgmModule:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AgmCoreModule } from '@agm/core';
import { AppComponent } from "./app.component";
import { MapComponent } from './map/map.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: "AIzaSyAjeJEPREBQFvAIqDSZliF0WjQrCld-Mh0"
    })
  ],
  declarations: [AppComponent, MapComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Recuerda usar tu API KEY generada

En el html de nuestro componente, pondremos lo siguiente:

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

	<agm-marker *ngFor="let marker of markers" [latitude]="marker.position.lat" [longitude]="marker.position.lng" [label]="marker.label">
	</agm-marker>

</agm-map>

Y en la parte del ts, será así:

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.css"]
})
export class MapComponent implements OnInit {
  
  public markers: any[];
  public lat: number;
  public lng: number;
  public zoom: number;

  constructor() {
    this.lat = 0;
    this.lng = 0;
    this.zoom = 2;
    this.markers = [];
  }

  ngOnInit() {
    this.markers.push({
      position: {
        lat: 40.4381311,
        lng: -3.8196233
      },
      label: {
        color: "black",
        text: "Madrid"
      }
    });

    this.markers.push({
      position: {
        lat: 48.8615515,
        lng: 2.3112233
      },
      label: {
        color: "black",
        text: "Paris"
      }
    });
  }
}

Puedes cambiar los valores a tu gusto.

En el CSS, pon lo siguiente:

agm-map {
    width: 100%;
    height: 450px;
}

Puedes poner la altura que quieras.

Aquí te dejo el ejemplo completo en stackblizt.

Espero que os sea de ayuda. Si tienes dudas, preguntad. Estamos para ayudarte.