How to Integration Google Maps in Angular 13 ?

Today now in this post i will show you How to Integration Google Maps in Angular 13 ? Here I am going to explain with you an example of how to integrate google maps in angular 13. So in this article i will goes into details about how to add google map in angular 13. Now you can understand about the concept of angular 13 google map example. So it’s a very simple example of angular 13 agm core with google maps example.

We know that Agm npm package is provides the google map API where we can easily use the google maps. So here I will give you an example with step by step also very simple example of how we can integrate google maps in our angular application. Now here we will install the agm/core npm package and then set latitude and longitude also with a marker. So you need to just follow the bellow step to create a very basic example.

Step 1: Create New App

We can easily create our angular application by using the bellow command:

ng new myNewApp
Step 2: Install agm/core npm Package

Now here in this step, we have to just need to install agm/core in our angular application. So let’s add as like bellow:

npm install @agm/core --save

Then we also need to install the “@types/googlemaps” for google maps library. so let’s need to run the bellow command for install the googlemaps npm.

npm install @types/googlemaps --save-dev

next, we need to open the “tsconfig.app.json” from root folder and we have to add the “googlemaps” in types array as like as bellow i added:

tsconfig.app.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "googlemaps"
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}
Step 3: Import Material AgmCoreModule

Now, here i will import the AgmCoreModule from @agm/core and then i will add on declarations part. So in this file i will also have to add Google API Key need to add. We can generate the google api key from here: Google Console. So let’s need to update app.module.ts file as like as bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { AgmCoreModule } from '@agm/core';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: 'GOOGLE API KEY',
      libraries: ['places']
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Step 4: Update Ts File

here, We have to update the ts file as like as bellow with lat and long variable:

src/app/app.component.ts

import { Component } from '@angular/core';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'firstApp';
  
  lat = 22.2736308;
  long = 70.7512555;
}
Step 5: Update HTML File

here, we have to update the html file as like as the bellow code:

src/app/app.component.html

<h1>Angular 13 Google Map Example - ItSolutionStuff.com</h1>
   
<agm-map 
   [latitude]='lat' 
   [longitude]='long'
   >
  
    <agm-marker 
        [latitude]="lat" 
        [longitude]="long">    
    </agm-marker>
  
</agm-map>

Run Angular App:

That’s good all required steps have been completed , now we need to type the given below command and then hit enter to run the Angular app:

ng serve

Read Also: How To Implement Laravel 9 form validation ?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →