Instalar y configurar google maps en Angular 9+

10/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 9+.

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 9.1.3.

Desde la versión 9, angular ha incluido un paquete oficial para google maps.

Lo primero que necesitamos es instalar el paquete @angular/google-maps

En el app.module, tendremos que añadir el módulo :


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

import { AppComponent } from "./app.component";
import { MapComponent } from "./map/map.component";

import { GoogleMapsModule } from "@angular/google-maps";
@NgModule({
  imports: [
    BrowserModule, 
    FormsModule, 
    GoogleMapsModule
  ],
  declarations: [AppComponent, MapComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

En nuestro index.html, deberemos añadir un script para añadir google maps con su API KEY.


<html>
  <head>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAjeJEPREBQFvAIqDSZliF0WjQrCld-Mh0"></script>
  </head>
  <body>
    <my-app>loading</my-app>
  </body>
</html>

Recuerda usar tu API KEY generada.

En el html de nuestro componente, pondremos lo siguiente:


<google-map width="100%" height="450px" [zoom]="zoom">

	<map-marker *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label">

	</map-marker>

</google-map>

Puedes poner la altura que quieras.

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 zoom: number;

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

  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.

Aquí te dejo el ejemplo completo en stackblizt.

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