Google Maps in Angular 17|16

To integrate Google Maps and show multiple marks on it in Angular 17, and 16 projects; Simply npm install @angular/google-maps module and import it in app.module.ts file, and use it with the app component to integrate google Maps and show it on html template.

Angular 17,16 Google Maps Integration Example

Steps to integrate Google Maps in angular 17,16 projects and display multiple markers on Google Maps:

Step 1 – Set up the Angular Project

First of all, open your cmd or command prompt and execute the following command on it to install and create a new angular project:

ng new angular-maps-app --no-standalone
cd angular-maps-app

Step 2 – Install @angular/google-maps npm Module

To install Google Maps modules by using npm install @angular/google-maps; like following:

npm install @angular/google-maps

Step 3 – Set Up Google Maps API Key

To use Google Maps in your application, you’ll need an API key. Follow these steps to get one:

1. Go to the Google Cloud Console: https://console.cloud.google.com/
2. Create a new project (if you don’t have one already).
3. In the dashboard, click on “APIs & Services” > “Credentials”.
4. Click on “Create Credentials” and select “API Key”.
5. Copy the generated API key.

Step 4 – Import Module in TypeScript File

Simply navigate to src/app folder and open app.module.ts, then import google map module like following into it:

  imports: [
    BrowserModule,
    GoogleMapsModule
  ],

Step 5 – Create Google Map in HTML Template

Navigate to your src folder and open index.html file, then add the google map script with api key in it like following:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCaKbVhcX_22R_pRKDYuNA7vox-PtGaDkI"></script>

Note:- Please replace ‘key‘ in index.html file with your google api key.

Next navigate to src/app directory and open app.component.html and add the following code to it:

<h1>Integrate Google Maps in Angular - Tutsmake.com</h1>

<google-map height="450px"
            width="1000px"
            [center]="center"
            [zoom]="zoom"
            (mapClick)="moveMap($event)"
            (mapMousemove)="move($event)">
</google-map>

<div>Latitude: {{display?.lat}}</div>
<div>Longitude: {{display?.lng}}</div>

Step 6 – Implement the Map Component

Navigate to src/app directory and open app.component.ts and then add the following code to component.ts file:

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

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

    constructor() {}

    ngOnInit(): void {}

    display: any;
    center: google.maps.LatLngLiteral = {
        lat: 22.2736308,
        lng: 70.7512555
    };
    zoom = 6;

    /*------------------------------------------
    --------------------------------------------
    moveMap()
    --------------------------------------------
    --------------------------------------------*/
    moveMap(event: google.maps.MapMouseEvent) {
        if (event.latLng != null) this.center = (event.latLng.toJSON());
    }

    /*------------------------------------------
    --------------------------------------------
    move()
    --------------------------------------------
    --------------------------------------------*/
    move(event: google.maps.MapMouseEvent) {
        if (event.latLng != null) this.display = event.latLng.toJSON();
    }
}

Step 7 – Start the Angular Google Login App

In this step, execute the following command on terminal to start angular apps:

ng serve

Open your browser and navigate to http://localhost:4200. You should see the map centered on the specified latitude and longitude with a marker.

Conclusion

Congratulations! You have successfully integrated Google Maps into your Angular application.

Recommended Angular Tutorials