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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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.
|
1 2 3 4 5 6 7 8 |
Recuerda usar tu API KEY generada.
En el html de nuestro componente, pondremos lo siguiente:
|
1 2 3 4 5 6 7 |
Puedes poner la altura que quieras.
Y en la parte del ts, será así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
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