Angular 16 Google Maps Integration Example

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

How To Integrate Google Maps in Angular 16

Follow the below given steps to integrate google maps in Angular 16 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 16 tutorial; you have learned how to integrate Google Maps in Angular project.

Recommended Angular Tutorials

Leave a Comment