ngx-googlemaps-tracking-view

v2.1.0

Published

2 years ago

A General-purpose embedded Angular map for tracking objects in real time using [Google Maps](https://developers.google.com/maps/documentation/javascript/tutorial).

Downloads

0High
0Medium
0Low

raschidjfr

angular googlemaps location maps tracking realtime real-time ngx uber

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 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

[email protected]

https://raschidjfr.dev

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme