How to use Google Maps in Angular

Angular is an open-source framework developed by Google that is built with TypeScript. It enables users to create front-end applications for both mobile and web platforms. It is focused on creating dynamic single-page applications (SPA) and provides a structured way to build client-side applications using TypeScript/JavaScript, HTML, and CSS. It also supports multiple libraries and encourages component-based architecture.

One of these libraries is the AGM Core Libraryhttps://www.npmjs.com/package/@angular/google-maps. This library allows us to utilize Google Maps through its API. It allows for various functionalities such as setting up markers, adjusting width and height, recentering the view, zoom capabilities, and more.

Key takeaways:

  • The AGM Core Library (now @angular/google-maps) enables integration of Google Maps API in Angular applications.

  • Key features include setting up markers, adjusting map dimensions, recentering the view, and enabling zoom capabilities.

  • Obtaining a Google Maps API key is crucial for using Google Maps services in the application.

  • Import the GoogleMapsModule and include it in the imports array of the app.module.ts file.

  • Real-time location tracking can be implemented using event handlers like mapMousemove.

Setting up Angular

Before starting the Angular setup, we must have Node.js and NPM (or Yarn) package manager. To install these, visit the official website for NPM and download the version compatible with our machine.

Now that we have set up Node.js and our package manager, we can proceed with Angular. Follow the steps below to download, install, and set up our Angular application.

  1. To install the Angular CLI, we’ll open our terminal and enter the following command: 

npm install -g @angular/cli
Install Angular CLI

  1. Now, we can create our Angular application by entering the command below, where we can replace the mapsApp with any name we like. After we enter this, we need to enable routing and select CSS as our style.

ng new mapsApp
Create Angular application

  1. To make our process more accessible, we can use an IDE like VS Code and install extensions like Angular Language Service.

  2. To install the AGM library, open the folder we created and run the following command on the terminal: 

npm install @angular/google-maps
Install AGM library

Obtaining a Google Maps API key

To integrate Google Maps into our Angular application, we’ll need to acquire an API key. Do the following:

  1. Navigate to the Google Cloud Console.

  2. Create a new project or choose an existing one.

  3. Enable the Google Maps JavaScript API.

  4. Create credentials to obtain your API key.

  5. Restrict the API key to the domain for security.

Implementation

Let’s now begin with our implementation of Google Maps in Angular.

  1. We’ll import the GoogleMapsModule in our app.module.ts file. We’ll also add the imported module to the imports section. 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {GoogleMapsModule} from '@angular/google-maps';  // added
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    GoogleMapsModule // added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  1. Now we’ll use a demo Google Maps API key by adding a new script tag to our index.html file. We can either replace it with our own or for demonstration purposes, we can use this key. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MapsApp</title>
  <base href="/"> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- added below -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFaXNvUSNlqQoqlNBgCgppWcSeYxb5kDM"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>
Adding API key

  1. In our app.component.html file, we'll add our HTML code that displays our map with center, zoom, and mouse movement functionality. 

<!-- setting height and width respectively, 
  and calling our three functions -->
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom"
            (mapMousemove)="move($event)">
</google-map>
<!-- displaying real-time location -->
<div>Latitude: {{display?.lat}}</div>
<div>Longitude: {{display?.lng}}</div>
Displaying our map

  1. Finally, we'll set the TypeScript functions in our HTML in our app.component.ts file. 

//  Rest of the code
export class AppComponent {
  constructor() {}
  ngOnInit(): void {}
  display: any; // Property to store latitude and longitude data from the map
  center: google.maps.LatLngLiteral = {
    // Initial center coordinates for the map
    lat: 31.51679331043587,
    lng: 74.35149289364826 
  };
  zoom = 4; // Initial zoom level for the map
  move(event: google.maps.MapMouseEvent) {
    // Method to handle map click event and update the display property
    if (event.latLng != null) {
      this.display = event.latLng.toJSON();
    }
  }
}

We have finished creating our Google Maps integrated Angular application. Now, we can visit the local host page and see our map. Moreover, we have given a running version of the map application below for convenience.

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
  "recommendations": ["angular.ng-template"]
}
Example maps application

Conclusion

Angular’s various libraries, like the AGM Core library, allow users to add many third-party applications and features. This creates a better experience in terms of useability and features. Moreover, it supports other features such as map marking, distance calculations, etc. These features can be an integral part of web and mobile development and can be used to improve the user experience.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

How to create maps in Angular

Follow the steps below to create maps in Angular:

  1. Set up an Angular project using the Angular CLI.
  2. Install the @angular/google-maps package.
  3. Import GoogleMapsModule in the app.module.ts file.
  4. Add the Google Maps script with your API key to index.html.
  5. Use the <google-map> component in your template.
  6. Configure map options (center, zoom, etc.) in your component’s TypeScript file.
  7. Implement additional features like markers or event handlers as needed.

How do I add Google Maps to Angular 17?

To add Google Maps to Angular 17:

  1. Ensure you have the latest version of Angular CLI installed.
  2. Create a new project or use an existing one.
  3. Install the @angular/google-maps package using npm or yarn.
  4. Import GoogleMapsModule in your app.module.ts file.
  5. Add the Google Maps script with your API key to index.html.
  6. Use the <google-map> component in your templates.
  7. Configure the map in your component’s TypeScript file.
  8. Implement any additional features or customizations as needed.

How to get the Google Map API key in Angular

To get a Google Maps API key for Angular:

  1. Go to the Google Cloud Console.
  2. Create a new project or select an existing one.
  3. Navigate to the APIs & Services > Dashboard.
  4. Click “+ ENABLE APIS AND SERVICES” and search for “Maps JavaScript API.”
  5. Enable the Maps JavaScript API for your project.
  6. Go to the Credentials page and click “Create credentials”> "API key.”
  7. Copy the generated API key.
  8. Restrict the API key to your domain for security (optional but recommended).
  9. Add the API key to your index.html file in the Google Maps script tag.

Remember to keep your API key secure and never expose it in client-side code. Use environment variables or server-side solutions to protect your key in production environments.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved