Angular Tutorial to Integrate Google Maps API to Render Maps With Markers @angular/google-maps in TS

How to Use @angular/google-maps to Integrate and Show a Map with Markers in Your Angular Project

The @angular/google-maps package makes it easier to integrate Google Maps into your Angular projects. This guide walks you through the process of integrating and using Google Maps to display a map with markers in an Angular application.

Step 1: Create an Angular Project

First, create a new Angular project if you don’t already have one:

ng new angular-google-maps-demo
cd angular-google-maps-demo

1 2	ng new angular-google-maps-demo cd angular-google-maps-demo

Step 2: Install @angular/google-maps

Install the @angular/google-maps package using npm:

npm install @angular/google-maps

1	npm install @angular/google-maps

Step 3: Get a Google Maps API Key

Go to the Google Cloud Console.
Create a new project or use an existing one.

Navigate to the API & Services > Credentials section.
Click Create Credentials and select API Key.
Enable the Maps JavaScript API for your project.

Restrict your API key to avoid misuse (optional but recommended).

Step 4: Add the API Key to Your Project

Add the API key to your index.html file by including the Google Maps script:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularGoogleMapsDemo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AngularGoogleMapsDemo</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

Replace YOUR_API_KEY with your actual API key.

Step 5: Import GoogleMapsModule

In your Angular app, import GoogleMapsModule from @angular/google-maps in your app’s main module:

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleMapsModule } from '@angular/google-maps';

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

// src/app/app.module.ts

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

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

import { AppComponent } from './app.component';

import { GoogleMapsModule } from '@angular/google-maps';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

GoogleMapsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Step 6: Add a Google Map to Your Component

Use the <google-map> component provided by the @angular/google-maps package to display a map.

Update the app.component.ts file:

// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  center: google.maps.LatLngLiteral = { lat: 37.7749, lng: -122.4194 }; // Default to San Francisco
  zoom = 12;

  markers: google.maps.MarkerOptions[] = [
    {
      position: { lat: 37.7749, lng: -122.4194 },
      title: 'Marker 1'
    },
    {
      position: { lat: 37.7849, lng: -122.4294 },
      title: 'Marker 2'
    }
  ];
}

// src/app/app.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

center: google.maps.LatLngLiteral = { lat: 37.7749, lng: -122.4194 }; // Default to San Francisco

zoom = 12;

markers: google.maps.MarkerOptions[] = [

{

position: { lat: 37.7749, lng: -122.4194 },

title: 'Marker 1'

{

position: { lat: 37.7849, lng: -122.4294 },

title: 'Marker 2'

}

];

}

Update the app.component.html file:

<div style="width: 100%; height: 500px;">
  <google-map
    [center]="center"
    [zoom]="zoom"
    [options]="{ mapTypeId: 'roadmap' }">
    <map-marker *ngFor="let marker of markers"
      [position]="marker.position"
      [title]="marker.title">
    </map-marker>
  </google-map>
</div>

<google-map

[center]="center"

[zoom]="zoom"

[options]="{ mapTypeId: 'roadmap' }">

<map-marker *ngFor="let marker of markers"

[position]="marker.position"

[title]="marker.title">

</map-marker>

</google-map>

</div>

Step 7: Add Basic Styling

Google Maps requires some styling for proper rendering. Add the following styles to your styles.css file:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

google-map {
  display: block;
  height: 100%;
}

html, body {

height: 100%;

margin: 0;

padding: 0;

}

google-map {

display: block;

height: 100%;

}

Step 8: Run Your Application

Run your Angular application to see the Google Map with markers:

ng serve

ng serve