Step by Step Guide to Integrate Gooogle Maps API in Angular Project

In this article, we will be learning how to integrate Google Maps API in your Angular project.

Before we start, I assume you have all these ready:

1. Angular CLI
2. An existing Angular project

Step 1: Install AGM

1

npm i -S @agm/core

This will install the Angular Google Maps (or AGM) dependency. We require an API key before we integrate AGM with our Angular App. So let’s create it first.

Step 2: Create Google Maps API Key

To create an API Key, you must log in into the Google Cloud Platform Console and create a project first. If the project already exists, select the respective project from the Select a Project dropdown.

In case, if you want to create a new one. Click on New Project button as shown in the below example.

Once the project is created, click on your project -> then click on Open button at the bottom right in the dialog.

You will be asked to create credentials. Click on Create a credentials button and select the API key from the dropdown. This will open up a dialog with a new API key. Copy-Paste it in your notepad for the time being.

This is the final step, search for “Maps JavaScript API” in the main search bar, you will be taken the library page where you will be asked to enable the library. Click on Enable button to do the same.

First 1 million requests are free and then you will be charged based on the usage. To make it production-ready you need to enable billing. Here is the reference.

Now you are ready to integrate AGM.

Step 3: Include AGM in your Angular Project

1
2
3

AgmCoreModule.forRoot({
  apiKey: '<PASTE_YOUR_API_KEY_HERE>'
})

Include AgmCoreModule in your app.module.ts and paste your newly generated key as in the above example. For more information or customization refer here.

All set! Now we are ready to test it out.

Final Step: Run an example

Here is how *.component.ts file should look like, modify accordingly:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  lat = 51.678418;
  lng = 7.809007;
}

and the template *.component.html should be like:

1
2
3

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

and here is the mandatory thing required, we must give mandatory height to agm-map to make the maps visible:

1
2
3

agm-map {
  height: 400px;
}

That’s it! Hope you like this article. In case of any queries, comment out below. Feel free to share with others.