Building a Real-Time GPS Tracking Dashboard in Angular with Google Maps API

This article explains how to build a complete real-time GPS tracking dashboard using Angular, Google Maps JavaScript API, and real-time push mechanisms such as SignalR or WebSockets. All diagrams follow your preferred style with smaller headers.

Language is kept simple Indian English, and the content is suitable for beginners to expert full-stack developers.

Introduction

Real-time GPS tracking is used in logistics, cab services, fleet management, delivery systems, public transport, and safety applications. Angular provides an excellent front-end framework for interactive dashboards, and Google Maps API is the most reliable mapping platform for live updates.

In this article, we will build a dashboard that:

Loads Google Map inside Angular
Displays vehicles or assets as markers
Updates marker positions in real time
Shows movement paths (polyline)
Displays speed, direction, and other attributes
Uses ASP.NET Core backend + SQL Server for storing location history
Uses SignalR/WebSocket to push live updates

Flowchart (smaller header)

+-----------------------+
| GPS Device / Mobile   |
| Sends Location Data   |
+-----------+-----------+
            |
            v
+-----------+-----------+
| ASP.NET Core API      |
| Stores Data in SQL    |
| Pushes Live Update    |
+-----------+-----------+
            |
            v
+-----------+-----------+
| Angular App (Client)  |
| Google Maps Component |
| Marker Refresh        |
+-----------------------+

Workflow (smaller header)

Device generates latitude, longitude, speed, time.
Backend receives data via REST API or MQTT gateway.
SQL Server stores the raw and processed logs.
Backend broadcasts live changes using SignalR/WebSockets.
Angular receives update and moves marker smoothly on Google Map.
Dashboard displays distance covered, history, and alerts.

Architecture Diagram (Visio-style, smaller header)

                   +--------------------------+
                   |   GPS Device / Mobile    |
                   +-----------+--------------+
                               |
                               v
                  +------------+-------------+
                  |   ASP.NET Core API       |
                  |   (Tracking Controller)  |
                  +------------+-------------+
                               |
            +------------------+------------------+
            |                                     |
            v                                     v
+-----------+-----------+            +-------------+---------------+
|   SQL Server DB       |            |  SignalR Hub / WebSockets   |
| (Location History)    |            | Sends Real-time Updates     |
+-----------+-----------+            +-------------+---------------+
                                               |
                                               v
                                   +-----------+------------+
                                   | Angular GPS Dashboard  |
                                   | Google Maps Component  |
                                   +------------------------+

ER Diagram (smaller header)

+---------------------+       +---------------------------+
| Device              | 1 --- * | LocationLog             |
+---------------------+       +---------------------------+
| DeviceId (PK)       |       | LogId (PK)               |
| Name                |       | DeviceId (FK)            |
| Type                |       | Latitude                 |
| Status              |       | Longitude                |
+---------------------+       | Speed                    |
                              | Direction                |
                              | RecordedAt (datetime)    |
                              +--------------------------+

Sequence Diagram (smaller header)

Device → API: Send(lat, long, speed)
API → SQL: Insert location log
API → SignalR Hub: Broadcast update
Hub → Angular: Push new coordinates
Angular → Google Maps: Update marker position
User → Angular: View dashboard and history

Setting Up Google Maps in Angular

Step 1: Load Google Maps API

Add the script with your API key in index.html:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=geometry"></script>

Step 2: Create the Map Component

map.component.ts

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

declare const google: any;

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

  map: any;
  markers: any = {};

  ngOnInit() {
    this.initMap();
  }

  initMap() {
    this.map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 19.0760, lng: 72.8777 },
      zoom: 11
    });
  }

  updateMarker(deviceId: string, lat: number, lng: number) {
    if (!this.markers[deviceId]) {
      this.markers[deviceId] = new google.maps.Marker({
        position: { lat, lng },
        map: this.map,
        title: deviceId
      });
    } else {
      this.markers[deviceId].setPosition(new google.maps.LatLng(lat, lng));
    }
  }
}

map.component.html

<div id="map"></div>

map.component.scss

#map {
  width: 100%;
  height: 100vh;
}

Adding Real-Time Tracking with SignalR

Step 1: Install SignalR Client

npm install @microsoft/signalr

Step 2: Connect to ASP.NET Core Hub

import * as signalR from '@microsoft/signalr';

export class LiveMapComponent implements OnInit {

  hub: any;

  ngOnInit() {
    this.initMap();

    this.hub = new signalR.HubConnectionBuilder()
      .withUrl('https://yourapi.com/gpsHub')
      .build();

    this.hub.start().then(() => console.log('Hub connected'));

    this.hub.on('locationUpdated', (data: any) => {
      this.updateMarker(data.deviceId, data.lat, data.lng);
    });
  }
}

Backend: ASP.NET Core SignalR Hub

TrackingHub.cs

public class TrackingHub : Hub
{
    public async Task BroadcastLocation(LocationDto location)
    {
        await Clients.All.SendAsync("locationUpdated", location);
    }
}

Receiving Data and Broadcasting

TrackingController.cs

[ApiController]
[Route("api/tracking")]
public class TrackingController : ControllerBase
{
    private readonly IHubContext<TrackingHub> _hub;

    public TrackingController(IHubContext<TrackingHub> hub)
    {
        _hub = hub;
    }

    [HttpPost("update-location")]
    public async Task<IActionResult> UpdateLocation(LocationDto dto)
    {
        // Save in SQL Server
        // _repository.SaveLocation(dto);

        // Broadcast to clients
        await _hub.Clients.All.SendAsync("locationUpdated", dto);

        return Ok();
    }
}

Building the Dashboard UI

You can enhance your Angular dashboard with:

Vehicle list with status
Search bar
Speed and direction indicators
Polyline showing route history
Alerts (overspeeding, idle time)
Heatmap of frequent stops

Example: Drawing Movement Path

updatePath(deviceId: string, lat: number, lng: number) {
  if (!this.paths[deviceId]) {
    this.paths[deviceId] = new google.maps.Polyline({
      path: [],
      map: this.map,
      strokeColor: '#007bff'
    });
  }

  const path = this.paths[deviceId].getPath();
  path.push(new google.maps.LatLng(lat, lng));
}

SQL Server Storage Strategy

Use partitioning for large tables
Store raw logs separately from processed logs
Create indexes on (DeviceId, RecordedAt)
Use archival tables for old tracking data

Example DDL

CREATE TABLE LocationLog (
    LogId INT IDENTITY PRIMARY KEY,
    DeviceId NVARCHAR(50),
    Latitude FLOAT,
    Longitude FLOAT,
    Speed FLOAT,
    Direction FLOAT,
    RecordedAt DATETIME2
);

Performance and Scalability Tips

Use clustering + SignalR backplane for many devices
Use SQL Server temporal tables for fast history browsing
Implement marker clustering on Google Maps for large datasets
Enable lazy loading of historical paths
Use RxJS for throttling UI updates

Conclusion

You now have a complete blueprint for designing and implementing a real-time GPS tracking dashboard in Angular using Google Maps, ASP.NET Core, SignalR, and SQL Server.

The same architecture works for:

Fleet tracking systems
Cab/driver live monitoring
School bus tracking
Asset movement inside warehouse
Delivery agent tracking

Full Source Code : Complete Source Code Structure for Real-Time GPS Tracking Dashboard (Angular + ASP.NET Core)