Instalar y configurar google maps en Angular 8

05/11/20200 comentarios

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 {}

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>

[latitude]="lat" [longitude]="lng" [zoom]="zoom">

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

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"
      }
    });
  }
}

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;
}

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.

Articulos relacionados

Cómo mejorar la seguridad en Windows 11

25/02/2026

Stack en Java desde cero: guía completa con ejemplos

05/01/2026

Instalar y configurar google maps en Angular 8

Articulos relacionados

Cómo mejorar la seguridad en Windows 11

Stack en Java desde cero: guía completa con ejemplos

Deja una respuesta