Angular 12 Google Maps Integration using AGM/core Plugin

Integrate google Maps in Angular 12/11/10/9; This tutorial will provide you complete guide on how to integrate google map using npm install @agm/core in angular 12/11/10/9 apps. And as well as, how to show markers on google map in angular apps.

This Integrate google Maps in Angular 9 tutorial will use Angular Google Maps (AGM) Core plugin to embed the map in the Angular 12 application. It is a very simple library to build Google Maps components in Angular 12/11/10/9 apps.

How to Integrate google Maps in Angular 12 using agm/core Library

• Step 1 – Create New Angular App
• Step 2 – Install Angular Google Maps Plugin
• Step 3 – Get Maps API Key
• Step 4 – Import Modules on App.Module.ts File
• Step 5 – Add Code on View File
• Step 6 – Add Code On App.Component ts File
• Step 7 – Start the Angular Google Login App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Angular Google Maps Plugin

In this step, execute the following command on terminal to install NPM package for implement google map in angular apps:

npm install @agm/core --save

Step 3 – Get Maps API Key

In this step, you need to get google api key; So, first, you have to have the Maps API Key, and you can go here to get the complete instructions.

Step 4 – Import Modules on App.Module.ts File

In this step, visit src/app directory and open app.module.ts file. And please add apiKey: ‘GOOGLE MAPS API KEY’ in the following code. Then add the following lines of into app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AgmCoreModule.forRoot({
      apiKey: 'GOOGLE MAPS API KEY'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Step 5 – Add Code on View File

In this step, create a google map html in angular app. So, visit src/app/app.component.html and update the following code into it:

<agm-map [latitude]='lat' [longitude]='long' [mapTypeId]='googleMapType'>
</agm-map>

Step 6 – Add Code On App.Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  
  lat = 28.704060;
  long = 77.102493;
  googleMapType = 'satellite';

}

Step 7 – Start the Angular Google Login App

In this step, execute the following command on terminal to start angular google social login app:

ng serve

Conclusion

Integrate Google Maps in Angular 12/11/10/9 tutorial; you have learned how to integrate Google Maps in Angular project.

Recommended Angular Tutorials