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
