Angular 14 Google Maps Integration Example Tutorial

Integrate Google Maps in angular 14 apps; Through this tutorial, we will learn how to integrate google map using npm agm/core plugin in angular 14 apps. And as well as, how to show markers on google map in angular apps.

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

Use the following steps to integrate google maps in angular 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

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 in 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 – Create Google Map in 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 – Import Components in 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 apps:

ng serve

Conclusion

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

Recommended Angular Tutorials