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