Google Maps In Angular 16

If you want to integrate Google Maps and show multiple marks in it in your Angular project. then this tutorial is for you.

So, in this tutorial, you will learn how to integrate google map using npm agm/core plugin in angular 16 projects to show markers on google map in angular projects.

Angular 16 Google Maps Integration Example

Steps to integrate and use google maps in angular 16 projects and display multiple markers on google maps:

• Step 1 – Set up the Angular Project
• Step 2 – Install AGM Package
• Step 3 – Set Up Google Maps API Key
• Step 4 – Import Modules in App.Module.ts File
• Step 5 – Create Google Map in HTML Tamplate
• Step 6 – Implement the Map Component
• Step 7 – Start the Angular Google Login App

Step 1 – Set up the Angular Project

First of all, open your cmd or command prompt and execute the following command on it to install and create a new angular project:

ng new angular-maps-app
cd angular-maps-app

Step 2 – Install AGM Package

Next, you need to install the Angular Google Maps package using npm. So, execute the following command on cmd to install it:

npm install @agm/core --save

Step 3 – Set Up Google Maps API Key

To use Google Maps in your application, you’ll need an API key. Follow these steps to get one:

1. Go to the Google Cloud Console: https://console.cloud.google.com/
2. Create a new project (if you don’t have one already).
3. In the dashboard, click on “APIs & Services” > “Credentials”.
4. Click on “Create Credentials” and select “API Key”.
5. Copy the generated API key.

Once, you have got “YOUR_GOOGLE_MAPS_API_KEY” from google. Now, In your Angular project, open the angular-maps-app/src/app/app.module.ts file and import the AgmCoreModule. Add it to the imports array and configure the API key:

import { AgmCoreModule } from '@agm/core';

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
    }),
    // ... other imports
  ],
  // ... other configurations
})
export class AppModule {}

Replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.

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 HTML Tamplate

Next, you need to 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 – Implement the Map Component

Next, 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

Open your browser and navigate to http://localhost:4200. You should see the map centered on the specified latitude and longitude with a marker.

Conclusion

Congratulations! You have successfully integrated Google Maps into your Angular 16 application.

Keep in mind that the Google Maps JavaScript API has many features like custom markers, info windows, directions, and more. You can explore the @agm/core documentation and the Google Maps API documentation to expand your application’s functionality further.

Recommended Angular Tutorials