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:

https://www.discoduroderoer.es/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.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *