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:
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.
Deja una respuesta