En este tutorial, aprenderá cómo obtener la latitud y la longitud de la ubicación actual en los mapas de Google Angular 14 utilizando el paquete principal de Google AGM.
Utilice los siguientes pasos para integrar Google Maps en las aplicaciones de Angular 14; como sigue:
Ejecute el siguiente comando en la terminal para crear una nueva aplicación angular ejecutando el siguiente comando:
$ ng new angular-google-map-app
Luego, muévete dentro del directorio de la aplicación:
$ cd angular-google-map-app
Luego ejecute el siguiente comando en la terminal para instalar el paquete de la biblioteca de códigos AGM ejecutando el siguiente comando npm:
$ npm install @agm/core@1 --save
Luego ejecute el siguiente comando en la terminal para instalar el tipo para la biblioteca de Google Maps. Por lo tanto, ejecute el paquete de tipo npm debajo también:
$ npm install @types/googlemaps --save-dev
A partir de entonces, abra el archivo tsconfig.app.json"googlemaps" , luego agregue la propiedad debajo de la matriz de tipos:
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [
"googlemaps"
]
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
Importe AgmCoreModule y luego agréguelo a la matriz de importaciones. Después de eso, podremos usar los mapas de Google en nuestra aplicación Angular.
Clave API de Google : también debe especificar la clave API de Google en el módulo de la aplicación. Debe visitar Google Console y luego crear la clave API.
Abramos el archivo app.module.ts y actualícelo como se muestra a continuación:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { AgmCoreModule } from '@agm/core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
AgmCoreModule.forRoot({
apiKey: 'GOOGLE API KEY',
libraries: ['places']
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Ahora, defina la variable para mantener los valores de latitud y longitud. Dirígete al archivo app.component.ts y actualiza el siguiente código:
//app.component.ts
import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title: string = 'AGM project';
latitude!: number;
longitude!: number;
@ViewChild('search')
public searchElementRef!: ElementRef;
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone
) { }
ngOnInit() {
//load Places Autocomplete
this.mapsAPILoader.load().then(() => {
});
}
onMapClicked(event: any){
console.table(event.coords);
this.latitude = event.coords.lat;
this.longitude = event.coords.lng;
}
}
Arriba, el onMapClicked evento se activará al hacer clic en el mapa en cualquier área para devolver el Objeto con latitud, longitud y otra información.
Ahora abra el archivo app.component.html y agregue la siguiente plantilla HTML:
<!-- app.component.html -->
<div class="container">
<h1>Angular Google Maps - Get Latitude and Longitude on Click</h1>
<agm-map [latitude]="latitude" [longitude]="longitude" (mapClick)="onMapClicked($event)">
</agm-map>
<div>Latitude: {{latitude}}</div>
<div>Longitude: {{longitude}}</div>
</div>Copy
El (mapClick) evento devolverá las coordenadas actuales al hacer clic en el mapa de Google.
Finalmente, ejecute la aplicación presionando el siguiente comando:
$ ng serve --open
Será la aplicación en la siguiente URL
http://localhost:4200
¡Feliz codificación!