ngx-googlemaps-tracking-view

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

Usage no npm install needed!

<script type="module">
  import ngxGooglemapsTrackingView from 'https://cdn.skypack.dev/ngx-googlemaps-tracking-view';
</script>

README

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

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

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

    //app.module.ts
    import { NgxGooglemapsTrackingViewModule } from 'ngx-googlemaps-tracking-view';
    
    @NgModule({
      imports: [
        NgxGooglemapsTrackingViewModule,
        ...
    
  3. 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.

    <!-- index.html -->
    <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 towardsheading 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>

Contributing

Feel free to improve the code: CONTRIBUTING.md.

Credits

Raschid JF. Rafaelly

hello@raschidjfr.dev

https://raschidjfr.dev