How to Implement Google Maps in Angular 11 Application

This is a quick and simple guide about integrating google maps in the angular 11 app, and we will use the agm core package using the node package manager to display a google maps marker in Angular.

The @agm/core is a free library available through npm and helps you integrate google maps ain angular. You can implement google maps very easily by setting up the latitude and longitude and display maps marker.

Google maps are part of our life, even best for nomadic, and yes, we use maps to navigate from one point to another. Maps help you show the new location, a new locality with precise details or even the whole earth’s surface. This angular 11 google maps example will help you use google maps in Angular.

Angular 11 Google Maps Implementation Example

  • Step 1: Setting Up Angular Environment
  • Step 2: Add Angular Google Maps (AGM Core) Pacakage
  • Step 3: Generate Google API Key
  • Step 4: Register Google Map Module
  • Step 5: Use Google Map in Angular
  • Step 6: Run Angular App

Setting Up Angular Environment

Angular development is not possible without the Angular CLI. It lets you install a new application; you can generate components, routes, services and pipes with CLI to test the angular app.

Hence, use the command to install Angular CLI on your system.

npm install -g @angular/cli

Use the suggested command to install a new angular application:

ng new ng-google-map

Don’t forget to go inside the app:

cd angular-demo 

Add Angular Google Maps (AGM Core) Pacakage

Subsequently, go to the console and execute the command to install Angular Google Maps (AGM) core package; it will allow you to create Google maps components.

npm install @agm/core

Generate Google API Key

We have successfully imported the AGM module; now, we have to import and register in the main module file.

The API key is the sole identifier that validates your project’s requests for usage and billing purposes. Theoretically, we need the Google API Key to make the connection between Google and Angular together.

You can get the API key:

  • Go to the APIs & Services > Credentials page.
  • Go to the Credentials page.
  • On the Credentials page, click Create credentials > API key.
  • The API key created dialog displays your newly created API key.
  • The new API key is listed on the Credentials page under API keys. Remember to restrict the API key before using it in production.

Register Google Map Module in Main Module

Ideally, you have to import AgmCoreModule and inject the Agm Module in the imports array, access the forRoot() method and define the Google maps api key using the apiKey value.

Go to app.module.ts config file, and insert the suggested code:

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: 'ADD GOOGLE API KEY'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Use Google Map in Angular

Integrating Google Map is simple; you have to define the agm-map directive and pass latitude, longitude and mapTypeId in the HTML template file.

Go to app.component.html file, and update the suggested code:

<agm-map [latitude]='latitude' [longitude]='longitude' [mapTypeId]='type'>
</agm-map>

Head over to app.component.ts file, and add the following code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  latitude = 51.509865;
  longitude = -0.118092;
  type = 'satellite';

}

In the lat and long, you have to pass the place’s values and add the map type property in the type variable.

Run Angular App

You should execute the following command to start the angular app:

ng serve

Execution of ng serve command displays the given below url on the terminal window, so use it test the app:

http://localhost:4200

Conclusion

The angular google maps tutorial is over; throughout this quick guide, we went through every step to integrate google maps in the angular app. We hope this guide will help you working with angular and google maps.