Integrating Google Maps in Angular16

Published in

YavarTechWorks

4 min readJul 27, 2023

Learn how to seamlessly integrate Google Maps and explore the step-by-step process of integrating Google Maps into an Angular project.

Step 1 :
We need to install google-maps into our project by using the command

npm install @angular/google-maps

Step 2 :
Install google-maps types for typescript support by using the command

npm install --save @types/googlemaps

Step 3 : Import google-maps Module.
To import google-maps module into the angular project update the app.module.ts file as given below


// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GoogleMapsModule } from '@angular/google-maps'; // import GoogleMapsModule

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    GoogleMapsModule,  //import googleMapsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 4 : Update index.html file
In the index.html file add the <script>></script> tag within the file and it must be noted that Google API key should be generated and added into the script tag.

<script src="https://maps.googleapis.com/maps/api/js?key= Google API Key....."></script>

To generate your api key you must go to google Developers console https://console.cloud.google.com/apis/dashboard and do this following steps to get google API key

So first, you need to get access API key from Google Maps. Integrating Google Maps is a breeze if you have your API key handy.

1. Go to Google Developer Console.

You need to sign in with your Google account.

2. First, we need to create a project to enable Google Maps Services. So, click the New Project button.

3. After you clicked the New Project, it prompts you to enter the Project Name. You can give your desired project name. Then click the CREATE button.

4. Once a Project is created, it shows the created project name. Then click SELECT PROJECT.

5. Now we need to enable Google Maps Services to this project. So, click ENANBLE APIS AND SERVICES button.

6. Select the Maps JavaScript API option.

7. Click the Enable button to enable Google Maps services.

8. Now we need to get API credentials for Google Maps. So first click the triple horizontal bar and select APIs & Service -> Credentials.

9. Click the CREATE CREDENTIALS button.

10. Now choose the API Key.

11. It will show the API Key. Copy this API Key. Then use it in your index.html google Map Api <script></script> tag as given below


// index.html

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

Step 5 :
Update the app.component.ts file as given below

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}

  display: any;
  center: google.maps.LatLngLiteral = {
    lat: 20.5937,
    lng: 78.9629,
  };
  zoom = 2;
  moveMap(event: google.maps.MapMouseEvent) {
    if (event.latLng != null) this.center = event.latLng.toJSON();
  }
  move(event: google.maps.MapMouseEvent) {
    if (event.latLng != null) this.display = event.latLng.toJSON();
  }
}

Step 6 :
Update the app.component.html file as given below set the screen width and height as of yours requirments

<div class="d-flex ">
  <div>
    <google-map
            width="100vw"
            height="100vh"
            [center]="center"
            [zoom]="zoom"
            (mapClick)="moveMap($event)"
            (mapMousemove)="move($event)">
</google-map>
  </div>
  <div>
  </div>
</div>

Step 7 :
All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app

ng serve

I hope this following steps helps you to integrate google-maps into your angular project.

Integrating Google Maps in Angular16

Written by Manojkumar