{"id":42196996,"url":"https://github.com/manpreetsingh80/travel-marker","last_synced_at":"2026-01-27T00:18:22.927Z","repository":{"id":27750469,"uuid":"115106584","full_name":"ManpreetSingh80/travel-marker","owner":"ManpreetSingh80","description":"A google maps library to replay gps locations.","archived":false,"fork":false,"pushed_at":"2023-01-04T21:50:42.000Z","size":2417,"stargazers_count":18,"open_issues_count":19,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-26T13:08:47.538Z","etag":null,"topics":["animation","google-maps","gps","gps-tracking","markers","overlay-marker","replay-gps-locations","travel-marker","typescript"],"latest_commit_sha":null,"homepage":"https://manpreetsingh80.github.io/travel-marker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ManpreetSingh80.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-22T10:48:47.000Z","updated_at":"2024-08-28T03:20:31.000Z","dependencies_parsed_at":"2022-09-02T17:35:02.549Z","dependency_job_id":null,"html_url":"https://github.com/ManpreetSingh80/travel-marker","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/ManpreetSingh80/travel-marker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManpreetSingh80%2Ftravel-marker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManpreetSingh80%2Ftravel-marker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManpreetSingh80%2Ftravel-marker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManpreetSingh80%2Ftravel-marker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ManpreetSingh80","download_url":"https://codeload.github.com/ManpreetSingh80/travel-marker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManpreetSingh80%2Ftravel-marker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28792673,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T21:49:50.245Z","status":"ssl_error","status_checked_at":"2026-01-26T21:48:29.455Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["animation","google-maps","gps","gps-tracking","markers","overlay-marker","replay-gps-locations","travel-marker","typescript"],"created_at":"2026-01-27T00:18:22.802Z","updated_at":"2026-01-27T00:18:22.902Z","avatar_url":"https://github.com/ManpreetSingh80.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/ManpreetSingh80/travel-marker.svg?branch=master)](https://travis-ci.org/ManpreetSingh80/travel-marker)\n[![npm](https://img.shields.io/npm/v/travel-marker.svg)](https://www.npmjs.com/package/travel-marker)\n[![NPM Downloads](https://img.shields.io/npm/dt/travel-marker.svg?style=flat)](https://www.npmjs.com/package/travel-marker)\n\n# Travel Marker\n\nA google maps library to replay gps locations with animations.\n\n![Example](https://i.imgur.com/1dRxPfe.gif)\n\n## Features\n- An out-of-box solution with minimum configuration.\n- Compute intermediate gps points for smooth animation\n- Animation Controls\n  - Play/Pause\n  - Next/Previous\n  - Fast-Forward/Rewind\n  - Reset\n- Listen marker events like touch,mouseover etc.\n- Listen Animation events like paused,finished etc.\n\n## Demo\n\n### Browser\n\n[Codepen](https://codepen.io/manpreetsingh80/pen/aEpzjB)\n\n### Angular\n\n[Stackblitz](https://stackblitz.com/edit/travel-marker-angular-agm)\n\n## Installation\n```bash\n  npm install travel-marker\n```\n\nFor browser\n\n```typescript\n  \u003cscript src=\"https://unpkg.com/travel-marker/dist/travel-marker.umd.js\" async\u003e\n\n  var TravelMarker = travelMarker.TravelMarker;\n```\n\n## Usage\n\n### Creating a marker\n\n```typescript\n  // options\n  var options = {\n    map: map,  // map object\n    speed: 50,  // default 10 , animation speed\n    interval: 30, // default 10, marker refresh time\n    speedMultiplier: 1, // default 1, for fast-forward/rewind\n    cameraOnMarker: false,  // default false, move camera with marker\n    markerType: 'default',  // default: 'default'\n    markerOptions: { title: \"Travel Marker\" }\n  };\n  var marker = new TravelMarker(options);\n```\n\n### Creating an overlay marker\n\n```typescript\n  // options\n  var options = {\n    map: map,  // map object\n    speed: 50,  // default 10 , animation speed\n    interval: 30, // default 10, marker refresh time\n    speedMultiplier: 1, // default 1, for fast-forward/rewind\n    cameraOnMarker: false,  // default false, move camera with marker\n    markerType: 'overlay',  // default: 'default'\n    overlayOptions: {\n      offsetX: 0, // default: 0, x-offset for overlay\n      offsetY: 0, // default: 0, y-offset for overlay\n      offsetAngle: 0, // default: 0, rotation-offset for overlay\n      imageUrl: 'https://i.stack.imgur.com/lDrin.png', // image used for overlay\n      imageWidth: 36, // image width of overlay\n      imageHeight: 58, // image height of overlay\n    }\n  };\n  var marker = new TravelMarker(options);\n```\n\n### Add locations\n```typescript\n  var locationArray = [new google.maps.LatLng(74,23), new google.maps.LatLng(74.02,23.02), new google.maps.LatLng(74.04, 23.04)];\n  marker.addLocations(locationArray);\n```\n\n### Play Animation\n```typescript\nmarker.play();\n```\n\n### Pause animation.\n```typescript\nmarker.pause();\n```\n\n### Reset animation\n```typescript\nmarker.reset();\n```\n\n### Jump to next location\n```typescript\nmarker.next();\n```\n\n### Jump to previous location\n```typescript\nmarker.prev();\n```\n\n### Set Speed\n```typescript\nmarker.setSpeed(50);\n```\n\n### Set Interval\n```typescript\nmarker.setInterval(20);\n```\n\n### Set Animation multiplier to fast-forward/slow replay\n```typescript\nmarker.setSpeedMultiplier(2); // for 2x fast-forward\nmarker.setSpeedMultiplier(0.5); // for slow replay\n```\n\n### Add Listener to marker like click,mouseover etc.\n```typescript\nmarker.addListener('click', function() {\n  //  ...do something like show infobox\n});\n```\n\n### Listen Events\n```typescript\n/*  EventType = 'play' | 'paused' | 'finished' | 'reset' | 'checkpoint' | 'previous' | 'next'; \n    // checkpoint - when marker arrives on a location present in locationArray\n    TravelData = {\n      location: LatLng; // marker current location\n      playing: boolean; // is animation playing?\n      index: number;  // index in locationArray\n      status: 'reset' | 'playing' | 'paused' | 'finished';  // animation status\n    }\n*/\nmarker.event.onEvent((event: EventType, data: TravelData) =\u003e {\n  // .... do something\n});\n```\n\n### Set Map on marker\n```typescript\nmarker.setMap(null);  // hide marker from map\n```\n\n### Set MarkerOptions\n```typescript\nmarker.setMarkerOptions({ opacity: 0.8 });\n```\n\n### Set Overlay Options\n```typescript\nmarker.setOverlayOptions({ offsetAngle: 90 });\n```\n\n## Todo\n- [x] Add listeners to marker like click,hover etc.\n- [x] Add Examples\n- [x] Implement setMarkerOptions() and setOverlayOptions()\n- [x] Add jsdoc\n- [x] Custom events for play, pause, finished, checkpoint\n- [x] Add custom overlay markers with rotation\n- [x] Add images\n- [ ] Write test cases\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanpreetsingh80%2Ftravel-marker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanpreetsingh80%2Ftravel-marker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanpreetsingh80%2Ftravel-marker/lists"}