How to add Google map and Marker to your Application using AngularJS ?

The objective is to add a Google Map and a Marker in Angular application. When the user will click on a particular location on the map, the marker will be added to that particular location. For reaching the goal we will use AGM (Angular Google Maps) and its components that will make the solution very easy.

What is Angular Google Maps (AGM) ?

AngularJS provides Angular Google Maps Components used to integrate Google Maps services in an application. AGM has components that can be directly used in the application.

Approach and Solution:

The steps to use Angular Google Maps are given below:

• Install AGM to your local angular project using following command.

  npm install @agm/core --save

• Generate an API key to use the services.
  • Go to https://developers.google.com/maps/documentation/javascript/get-api-key and follow all the steps to create an API key.
  • Make sure your API is enabled, to enable your API follow the steps from this link https://support.google.com/googleapi/answer/6158841?hl=en
• Import AgmCoreModule to your applications

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

  Add AgmCoreModule.forRoot where you have to put the created API key to apiKey (apiKey:"your API key here").

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

  app.module.ts: javascript

  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 { }
  

• In HTML file component selector agm-map is used to introduce map where latitude and longitude is bind to variables latitude and longitude. The click on map i.e. (mapClick) event is used to pass event with function that contains latand lng coordinates of click on the map. For marker agm-marker selector is used where the same latitude and longitude are bind to local variables. app.component.html: html

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

• In the TypeScript file, the function is defined that takes the coordinates and binds it to a local variable which is used to set the marker on the click of the map. app.component.ts: javascript

  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;
    }
  }
  

Output:

Run the development server to get the map and click on the map to add the marker to the location you want.