How to Integrate Google Maps in Angular Application

We will learn how to add Google Maps using Google Maps API manually, we are going to rely on an Open source Google API to achieve the task.

Also, we will use Angular Google Maps (AGM) Core plugin to embed the map in the Angular application. It is a excellent plugin to create Google Maps components in Angular.

The @agm/core offers simple solutions for the Google Maps JavaScript Core API. It is a lightweight, well-know plugin for Google maps integration and being downloaded 1,00,000+ times weekly.

Create Angular Application

Let’s begin with creating a brand new angular application using the following command:

ng new angular-google-maps-example

Get inside the project root:

cd angular-google-maps-example

Start the application:

ng serve

Install Angular Google Maps Plugin

Run the command to install angular google maps package from the command-line tool:

npm install @agm/core

Get Maps API Key

Now, we have to configure the google maps plugin in angular application. So, first, you have to have the Maps API Key, and you can go here to get the complete instructions. %[developers.google.com/maps/documentation/ja..

Add Google Maps Module in App Module

Next, import the AgmCoreModule from ‘@agm/core’ and register the AgmCoreModule in imports array along with your Maps API key.

Add the code in 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 { }

Create Google Map in Angular

Now, we will create a simple google map, open the app.component.html file and add the following code inside.

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

We define the latitude and longtitude of some place to display the map of it, Also defined the map type of satellite.

Add the following code in app.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';

}

Finally, we learned how to integrate Google Maps in an Angular project. I hope this was helpful.

Thank You! kindly follow me

Ajayi Olumide

Ajayi Olumide

How to Integrate Google Maps in Angular Application