How to Integrate Google Maps in Angular 10 Application

Last updated on by Digamber

This is a comprehensive tutorial about how to work with Google Maps in the Angular 10 application. In this tutorial, we will learn how to create an interactive Google Map in Angular.

We will learn how to add Google Maps using Google Maps API manually, we are going to rely on 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 10/9 application. It is a superb 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 --open

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.

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 have done with this tutorial and we learned how to integrate Google Maps in Angular 10 project.