Angular 21 Google Maps Tutorial: Build a Location-Aware App

Developing applications that are aware of a user’s location has become a standard requirement in the rapidly evolving web world of today. Adding a map is the best way to display location data, whether you are developing a delivery tracker for a nearby bakery in London or a real estate finder for a busy Toronto neighborhood. Using the most recent framework features, this Angular 21 Google Maps tutorial will demonstrate how to create a location-aware, high-performance application.

Zoneless Angular Google Maps are now the norm thanks to Angular 21, which has completely changed the game. Your maps will now feel faster and require less memory thanks to the departure from the outdated Zone.js method. We’ll look at how to instantly update your user interface using Google Maps signals angular patterns.

Setup and Installation

Before we can display a single street, we need to prepare our workspace. Angular 21 projects are now zoneless by default, which means we get better performance right out of the box.

Open your terminal and run the following command to start a fresh project.

ng new geo-app --standalone
cd geo-app

Install the Official Google Maps Library

We will use the official Google Maps component maintained by the Angular team. It is reliable and fits perfectly with the component-based architecture.

npm install @angular/google-maps

Generating Google Maps API key

You must have a Google Cloud project to get an API key.

Go to the Google Cloud Console.
Enable the Maps JavaScript API.
Create an API Key and add it to your index.html file.

File: src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Location App</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_HERE"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Building the Location-Aware Component

Now, let’s look at how to implement angular maps standalone components. We will create a simple map that shows a business location, such as a cozy coffee shop in Warsaw.

Component Logic with Signals

We use Signals in Angular 21 to manage the map’s center and zoom level. This ensures that the map only re-renders when the data actually changes.

File: src/app/map/map.component.ts

import { Component, signal } from '@angular/core';
import { GoogleMapsModule } from '@angular/google-maps';

@Component({
  selector: 'app-map',
  standalone: true,
  imports: [GoogleMapsModule],
  templateUrl: './map.component.html',
  styleUrl: './map.component.css'
})
export class MapComponent {
  center = signal<google.maps.LatLngLiteral>({ lat: 52.2297, lng: 21.0122 });
  zoom = signal(12);
  
  options: google.maps.MapOptions = {
    mapId: 'DEMO_MAP_ID',
    disableDefaultUI: true,
    zoomControl: true
  };
}

The Template

The HTML is very clean. We use the directive and bind our signals to it.

File: src/app/map/map.component.html

<div class="map-wrapper">
  <google-map 
    height="500px"
    width="100%"
    [center]="center()"
    [zoom]="zoom()"
    [options]="options">
    
    <map-marker 
      [position]="center()"
      [title]="'Our Warsaw Office'">
    </map-marker>

  </google-map>
</div>

Adding Dynamic Markers

If you want to show multiple locations—like several delivery trucks in New York—you can use angular google maps markers with a simple array signal.

File: src/app/map/map.component.ts

trucks = signal([
    { position: { lat: 40.7128, lng: -74.0060 }, label: 'Truck A' },
    { position: { lat: 40.7306, lng: -73.9352 }, label: 'Truck B' }
  ]);

File: src/app/map/map.component.html

<google-map height="500px" width="100%" [center]="center()" [zoom]="zoom()">
  @for (truck of trucks(); track truck.label) {
    <map-marker [position]="truck.position" [label]="truck.label"></map-marker>
  }
</google-map>

It will add markers to maps based on given data. However, in actual application these marker’s data will obtained via API.

Conclusion

The inclusion of maps has never been made easier than with the help of tools presented in this @angular/google-maps tutorial. With the ability to harness the power of angular 21 google maps, you can rest assured that your app is running slick and up-to-date. With signals and zone-less modes, the “weight” that the map has on performance is minimal.

The transition to angular as applied to standalone components ensures greater ease in testing as well as sharing code. You should begin experimenting with custom styles and marker settings so as to make your location-based application distinctive.

Codewolfy