Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 14 May, 2020

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: [
          apiKey:"your API key here"


    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';
      declarations: [
      imports: [
          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.

    <agm-map [latitude]="latitude" [longitude]="longitude" 
      <agm-marker [latitude]="latitude" [longitude]="longitude">

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

    import { Component } from '@angular/core';
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    export class AppComponent {

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
Recommended Articles
Page :

Start Your Coding Journey Now!