{"id":26460871,"url":"https://github.com/raschidjfr/ngx-googlemaps-tracking-view","last_synced_at":"2025-07-19T12:36:21.674Z","repository":{"id":57310942,"uuid":"202069051","full_name":"RaschidJFR/ngx-googlemaps-tracking-view","owner":"RaschidJFR","description":"General-purpose Angular map for tracking real-time objects using Google Maps","archived":false,"fork":false,"pushed_at":"2021-08-08T20:25:25.000Z","size":15962,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-01T21:10:01.476Z","etag":null,"topics":["angular","google-maps","google-maps-api","tracking"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RaschidJFR.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-13T05:12:55.000Z","updated_at":"2024-12-04T11:48:24.000Z","dependencies_parsed_at":"2022-09-07T07:31:17.974Z","dependency_job_id":null,"html_url":"https://github.com/RaschidJFR/ngx-googlemaps-tracking-view","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/RaschidJFR/ngx-googlemaps-tracking-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaschidJFR%2Fngx-googlemaps-tracking-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaschidJFR%2Fngx-googlemaps-tracking-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaschidJFR%2Fngx-googlemaps-tracking-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaschidJFR%2Fngx-googlemaps-tracking-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RaschidJFR","download_url":"https://codeload.github.com/RaschidJFR/ngx-googlemaps-tracking-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaschidJFR%2Fngx-googlemaps-tracking-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265934245,"owners_count":23852092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","google-maps","google-maps-api","tracking"],"created_at":"2025-03-19T03:48:48.243Z","updated_at":"2025-07-19T12:36:21.643Z","avatar_url":"https://github.com/RaschidJFR.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Google Maps Tracking View\n\nA 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.\n\n\u003e For **Angular \u003c 9.0** use version [@ng7](https://www.npmjs.com/package/ngx-googlemaps-tracking-view/v/1.5.0) of this package.\n\n* [Live Demo](https://raschidjfr.github.io/ngx-googlemaps-tracking-view)\n* [Documentation](https://raschidjfr.github.io/ngx-googlemaps-tracking-view/reference/components/NgxGooglemapsTrackingViewComponent.html)\n\n![Demo 1](https://raw.githubusercontent.com/RaschidJFR/ngx-googlemaps-tracking-view/master/img/demo1.jpg)\n\n![Demo 2](https://raw.githubusercontent.com/RaschidJFR/ngx-googlemaps-tracking-view/master/img/demo2.jpg)\n\n## 🌎 Usage\n\n```html\n\u003c!-- component.html --\u003e\n\u003cdiv style=\"height: 100%;\"\u003e\n  \u003cgmtv-map [data]=\"objectsToTrack\"\u003e\u003c/gmtv-map\u003e\n\u003c/div\u003e\n```\n\n```ts\n// component.ts\nimport { TrackedObject } from 'ngx-googlemaps-tracking-view';\n\nconst objectsToTrack: TrackedObject[] = [\n  {\n    id: '1',\n    color: 'blue',\n    heading: 45,\n    label: { text: 'Test object #1' },\n    position: new google.maps.LatLng(19.53124, -96.91589),\n  },\n  {\n    id: '2',\n    color: 'red',\n    heading: -30,\n    label: { text: 'Test object #2' },\n    position: new google.maps.LatLng(19.53144, -96.91523),\n  },\n];\n```\n\n## 🛠 Set Up\n\n1. Install package: `$ npm i ngx-googlemaps-tracking-view`\n2. Import the directive into your desired module (usually `app.module.ts`):\n\n    ```ts\n    //app.module.ts\n    import { NgxGooglemapsTrackingViewModule } from 'ngx-googlemaps-tracking-view';\n\n    @NgModule({\n      imports: [\n        NgxGooglemapsTrackingViewModule,\n        ...\n    ```\n\n3. 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 `\u003chead\u003e` tag). Note the final part `\u0026libraries=geometry`, this is needed to load the Geometry library.\n\n    ```html\n    \u003c!-- index.html --\u003e\n    \u003chead\u003e\n      ...\n      \u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=**YOUR_API_KEY**\u0026libraries=geometry\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    ```\n\n\u003eSee *[\nGet Started with Google Maps Platform](https://developers.google.com/maps/gmp-get-started)* for more info.\n\n## 🧩 API\n\n| Param              | Type                                                                                               | Required? | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |\n| ------------------ | -------------------------------------------------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 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`: \u003cbr\u003e\u003cbr\u003e\u003cul\u003e\u003cli\u003e`color?: string` The marker's color.\u003c/li\u003e\u003cli\u003e`heading: number` Direction measured in degrees from true north.\u003c/li\u003e\u003cli\u003e`id: string` Unique identifier assigned to this object.\u003c/li\u003e\u003cli\u003e`icon?: google.maps.Icon / google.maps.Symbol` A google map's icon object.\u003c/li\u003e\u003cli\u003e`isOffline?: boolean` If `true`, the default marker (circle or triangle) will be outlined instead of solid.\u003c/li\u003e\u003cli\u003e`label?: label?: google.maps.MarkerLabel` A google maps label object to show near the marker.\u003c/li\u003e\u003cli\u003e`position: google.maps.LatLng` Scale for default markers. This is overwritten when `icon` is provided.\u003c/li\u003e\u003cli\u003e`scale?: number` The marker's color.\u003c/li\u003e\u003cli\u003e`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).\u003c/li\u003e\u003c/ul\u003e |\n| mapOptions         | [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) | Optional  | GoogleMaps initialization options.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |\n| 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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |\n\nSee [Full Documentation](https://raschidjfr.github.io/ngx-googlemaps-tracking-view/reference/components/NgxGooglemapsTrackingViewComponent.html)\n\n### Example\n\n```html\n\u003c!-- component.html --\u003e\n\n\u003cdiv id=\"parent\" style=\"height: 100%; width: 100%; position:relative\"\u003e\n\n  \u003c!-- Add the map component --\u003e\n  \u003cgmtv-map [data]=\"objectsToTrack\" [template]=\"infowindow\" [mapOptions]=\"mapOptions\" [showLocationButton]=\"true\"\u003e\n\n    \u003c!-- (Optional) Add a custom template for the infowindow --\u003e\n    \u003cng-template #infowindow let-o\u003e\n      \u003cdiv id=\"rootNode\"\u003e\n        \u003ch3\u003e{{o.label?.text}}\u003c/h3\u003e\n        \u003cp\u003e\n          \u003cstrong\u003eID:\u003c/strong\u003e {{o.id}}\u003cbr\u003e\n          \u003cstrong\u003ePosition:\u003c/strong\u003e {{o.position?.toJSON() | json}}\u003cbr\u003e\n          \u003cstrong\u003eHeading:\u003c/strong\u003e {{o.heading | number:'1.0-1'}}°\u003cbr\u003e\n        \u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/ng-template\u003e\n  \u003c/gmtv-map\u003e\n\n  \u003c!-- (Optional) Add the geo-location button **AFTER** the map --\u003e\n  \u003cgmtv-geolocation-button (locate)=\"onLocation()\"\u003e\u003c/gmtv-geolocation-button\u003e\n\n\u003c/div\u003e\n```\n\n## Contributing\nFeel free to improve the code: [CONTRIBUTING.md](./CONTRIBUTING.md).\n\n## Credits\nRaschid JF. Rafaelly\n\n\u003chello@raschidjfr.dev\u003e\n\nhttps://raschidjfr.dev\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraschidjfr%2Fngx-googlemaps-tracking-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraschidjfr%2Fngx-googlemaps-tracking-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraschidjfr%2Fngx-googlemaps-tracking-view/lists"}