Ngx-googlemaps-tracking-view NPM

Angular Google Maps Tracking View

A General-purpose embedded Angular map for tracking objects in real time using Google Maps. Helpful for Uber-like applications.

For Angular < 9.0 use version @ng7 of this package.

Demo 1

Demo 2

🌎 Usage

<!-- component.html -->
<div style="height: 100%;">
  <gmtv-map [data]="objectsToTrack"></gmtv-map>
</div>

// component.ts
import { TrackedObject } from 'ngx-googlemaps-tracking-view';

const objectsToTrack: TrackedObject[] = [
  {
    id: '1',
    color: 'blue',
    heading: 45,
    label: { text: 'Test object #1' },
    position: new google.maps.LatLng(19.53124, -96.91589),
  },
  {
    id: '2',
    color: 'red',
    heading: -30,
    label: { text: 'Test object #2' },
    position: new google.maps.LatLng(19.53144, -96.91523),
  },
];

🛠 Set Up

Install package: $ npm i ngx-googlemaps-tracking-view

Import the directive into your desired module (usually app.module.ts):

//app.module.ts
import { NgxGooglemapsTrackingViewModule } from 'ngx-googlemaps-tracking-view';

@NgModule({
  imports: [
    NgxGooglemapsTrackingViewModule,
    ...

Get an Google Maps API Key and add the SDK to your index.html (just before closing <head> tag). Note the final part &libraries=geometry, this is needed to load the Geometry library.
```

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

See Get Started with Google Maps Platform for more info.

🧩 API

Param	Type	Required?	Description
data	`TrackedObject[]`	Required	Array of objects to draw on the map. They must implement the interface `TrackedObject`: `color?: string` The marker's color.`heading: number` Direction measured in degrees from true north.`id: string` Unique identifier assigned to this object.`icon?: google.maps.Icon / google.maps.Symbol` A google map's icon object.`isOffline?: boolean` If `true`, the default marker (circle or triangle) will be outlined instead of solid.`label?: label?: google.maps.MarkerLabel` A google maps label object to show near the marker.`position: google.maps.LatLng` Scale for default markers. This is overwritten when `icon` is provided.`scale?: number` The marker's color.`speed?: number` If this value is not provided or is greater than 0 a triangle oriented towards`heading` will be shown as marker, otherwise, a circle (if `icon` is not set).
mapOptions	MapOptions	Optional	GoogleMaps initialization options.
template	TemplateRef	Optional	An Angular template for rendering the infowindow. If non provided, a default infowindow template will be used.

See Full Documentation

Example

<!-- component.html -->

<div id="parent" style="height: 100%; width: 100%; position:relative">

  <!-- Add the map component -->
  <gmtv-map [data]="objectsToTrack" [template]="infowindow" [mapOptions]="mapOptions" [showLocationButton]="true">

    <!-- (Optional) Add a custom template for the infowindow -->
    <ng-template #infowindow let-o>
      <div id="rootNode">
        <h3>{{o.label?.text}}</h3>
        <p>
          <strong>ID:</strong> {{o.id}}<br>
          <strong>Position:</strong> {{o.position?.toJSON() | json}}<br>
          <strong>Heading:</strong> {{o.heading | number:'1.0-1'}}°<br>
        </p>
      </div>
    </ng-template>
  </gmtv-map>

  <!-- (Optional) Add the geo-location button **AFTER** the map -->
  <gmtv-geolocation-button (locate)="onLocation()"></gmtv-geolocation-button>

</div>