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.
  • 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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.