Angular: How to include Google Maps API in your Angular Project

Feature Image: Step by Step Guide to Integrate Gooogle Maps API in Angular Project
Read progress

Lockdown is for Our Safety

  • Stay at home 🏡
  • Wash your hands frequently 🧼
  • Maintain social distancing 🤝❌
  • Avoid touching eyes, nose and mouth ☹
More Info
  • Home
  • Blog
  • Step by Step Guide to Integrate Gooogle Maps API in Angular Project

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

Easy navigation to:

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
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.

Select a Project
Select a Project

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

Create a New Project (If not created)
Create a New Project (If not created)

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

Click on APIs & Services -> Credentials
Click on APIs & Services -> Credentials

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.

Click on Create a credentials -> API key
Click on Create a credentials -> API key

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.

Enable Maps JavaScript API
Enable Maps JavaScript API

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
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:

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:

<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:

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.

Masoom Ul Haq S logo
About author
Masoom Ul Haq S

Masoom is a Front-end Developer, a UX Engineer and Freelancer based in Bangalore, India. Like to develop differential and effective User Experiences for digital products using an amalgamation of latest technology and best practises.

More on "Angular"

Be the first to know about my upcoming writings.

By using our site, you acknowledge that you have read and understand our Privacy Policy.