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.
🌎 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.<!-- 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:
|
| 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. |
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