Angular 15/14 Google Maps Integration Example

Angular 15/14 Google Maps example; Through this tutorial, i am going to show you how to integrate google map using npm agm/core plugin in Angular 15/14 apps.

How To Integrate Google Maps in Angular 15/14

Follow the below given steps to integrate google maps in Angular 15/14 apps and display multiple markers on it; as follows:

Step 1 – Create New Angular App
Step 2 – Install Angular Google Maps Plugin
Step 3 – Get Maps API Key
Step 4 – Import Modules in App.Module.ts File
Step 5 – Create Google Map in View File
Step 6 – Import Components in Component ts File
Step 7 – Start the Angular Google Login App

Step 1 – Create New Angular App

Run the following command on command prompt to install angular app:

ng new my-new-app

Step 2 – Install Angular Google Maps Plugin

Run the following command on command prompt to install NPM package:

npm install @agm/core --save

Step 3 – Get Maps API Key

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 in App.Module.ts File

Go to 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 – Create Google Map in View File

Go to src/app/app.component.html and update the following code into it:

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

Step 6 – Import Components in Component ts File

Go to 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

Run the following command on command prompt to start angular apps:

ng serve

Conclusion

Integrate Google Maps in Angular 15/14 tutorial; you have learned how to integrate Google Maps in Angular project.