¿Cómo agregar Google Map y Marker a su aplicación usando AngularJS?

El objetivo es agregar un mapa de Google y un marcador en la aplicación Angular. Cuando el usuario haga clic en una ubicación en particular en el mapa, el marcador se agregará a esa ubicación en particular. Para llegar al objetivo utilizaremos AGM (Angular Google Maps) y sus componentes que harán muy fácil la solución.

¿Qué es Angular Google Maps (AGM)?
AngularJS proporciona componentes angulares de Google Maps que se utilizan para integrar los servicios de Google Maps en una aplicación. AGM tiene componentes que se pueden utilizar directamente en la aplicación.

Enfoque y solución: los pasos para usar Angular Google Maps se detallan a continuación:

• Instale AGM en su proyecto angular local usando el siguiente comando.

  npm install @agm/core --save

• Genere una clave API para usar los servicios.
  • Vaya a https://developers.google.com/maps/documentation/javascript/get-api-key y siga todos los pasos para crear una clave API.
  • Asegúrese de que su API esté habilitada, para habilitar su API, siga los pasos de este enlace https://support.google.com/googleapi/answer/6158841?hl=en
• Importe AgmCoreModule a sus aplicaciones

  import { AgmCoreModule } from '@agm/core';

  Agregue AgmCoreModule.forRoot donde debe colocar la clave de API creada en apiKey (apiKey: «su clave de API aquí»).

  imports: [
      AgmCoreModule.forRoot({
        apiKey:"your API key here"
      })
  ]
  

  aplicación.módulo.ts:

  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AgmCoreModule } from '@agm/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';    @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     AgmCoreModule.forRoot({       apiKey:"your API Key"     })   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

• En el selector de componentes de archivos HTML, agm-map se usa para introducir un mapa donde la latitud y la longitud se unen a las variables latitud y longitud . El evento clic en el mapa, es decir (mapClick) se utiliza para pasar un evento con una función que contiene las coordenadas de latitud y longitud del clic en el mapa.

  Para el marcador agm-marker selector se utiliza donde la misma latitud y longitud se unen a las variables locales.
  aplicación.componente.html:

  <agm-map [latitude]="latitude" [longitude]="longitude"        (mapClick)="location($event)">   <agm-marker [latitude]="latitude" [longitude]="longitude"> </agm-marker> </agm-map>

• En el archivo TypeScript, se define la función que toma las coordenadas y las vincula a una variable local que se usa para establecer el marcador al hacer clic en el mapa.
  aplicación.componente.ts:

  import { Component } from '@angular/core';    @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'] }) export class AppComponent {   latitude=51.678418;   longitude=7.809007;   location(x){     this.latitude=x.coords.lat;     this.longitude=x.coords.lng;   } }

Salida: Ejecute el servidor de desarrollo para obtener el mapa y haga clic en el mapa para agregar el marcador a la ubicación que desee.