https://github.com/raschidjfr/ngx-googlemaps-tracking-view
General-purpose Angular map for tracking real-time objects using Google Maps
https://github.com/raschidjfr/ngx-googlemaps-tracking-view
angular google-maps google-maps-api tracking
Last synced: 12 months ago
JSON representation
General-purpose Angular map for tracking real-time objects using Google Maps
- Host: GitHub
- URL: https://github.com/raschidjfr/ngx-googlemaps-tracking-view
- Owner: RaschidJFR
- Created: 2019-08-13T05:12:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-08T20:25:25.000Z (almost 5 years ago)
- Last Synced: 2025-07-01T21:10:01.476Z (about 1 year ago)
- Topics: angular, google-maps, google-maps-api, tracking
- Language: TypeScript
- Size: 15.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Angular Google Maps Tracking View
A General-purpose embedded Angular map for tracking objects in real time using [Google Maps](https://developers.google.com/maps/documentation/javascript/tutorial). Helpful for Uber-like applications.
> For **Angular < 9.0** use version [@ng7](https://www.npmjs.com/package/ngx-googlemaps-tracking-view/v/1.5.0) of this package.
* [Live Demo](https://raschidjfr.github.io/ngx-googlemaps-tracking-view)
* [Documentation](https://raschidjfr.github.io/ngx-googlemaps-tracking-view/reference/components/NgxGooglemapsTrackingViewComponent.html)
## 🌎 Usage
```html
```
```ts
// 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`):
```ts
//app.module.ts
import { NgxGooglemapsTrackingViewModule } from 'ngx-googlemaps-tracking-view';
@NgModule({
imports: [
NgxGooglemapsTrackingViewModule,
...
```
3. Get an [Google Maps API Key](https://developers.google.com/maps/documentation/javascript/get-api-key) and add the SDK to your `index.html` (just before closing `` tag). Note the final part `&libraries=geometry`, this is needed to load the Geometry library.
```html
...
```
>See *[
Get Started with Google Maps Platform](https://developers.google.com/maps/gmp-get-started)* for more info.
## 🧩 API
| Param | Type | Required? | Description |
| ------------------ | -------------------------------------------------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| data | [`TrackedObject[]`](https://raschidjfr.github.io/ngx-googlemaps-tracking-view/reference/interfaces/TrackedObject.html) | 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](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) | Optional | GoogleMaps initialization options. |
| template | [TemplateRef](https://angular.io/api/core/TemplateRef) | Optional | An Angular template for rendering the infowindow. If non provided, a default infowindow template will be used. |
See [Full Documentation](https://raschidjfr.github.io/ngx-googlemaps-tracking-view/reference/components/NgxGooglemapsTrackingViewComponent.html)
### Example
```html
{{o.label?.text}}
ID: {{o.id}}
Position: {{o.position?.toJSON() | json}}
Heading: {{o.heading | number:'1.0-1'}}°
```
## Contributing
Feel free to improve the code: [CONTRIBUTING.md](./CONTRIBUTING.md).
## Credits
Raschid JF. Rafaelly
https://raschidjfr.dev