{"id":34778797,"url":"https://github.com/skyt-a/route-replay-googlemaps","last_synced_at":"2026-05-26T19:31:58.744Z","repository":{"id":290365605,"uuid":"974189185","full_name":"skyt-a/route-replay-googlemaps","owner":"skyt-a","description":"A library for replaying route data with time information on Google Maps.","archived":false,"fork":false,"pushed_at":"2025-04-30T12:20:27.000Z","size":784,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-28T10:59:37.318Z","etag":null,"topics":["googlemap","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://skyt-a.github.io/gm-route-replay/en/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skyt-a.png","metadata":{"files":{"readme":"README.ja.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-28T11:47:58.000Z","updated_at":"2025-04-30T12:20:27.000Z","dependencies_parsed_at":"2025-04-30T02:44:28.335Z","dependency_job_id":null,"html_url":"https://github.com/skyt-a/route-replay-googlemaps","commit_stats":null,"previous_names":["skyt-a/gm-route-replay","skyt-a/route-replay-googlemaps"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/skyt-a/route-replay-googlemaps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyt-a%2Froute-replay-googlemaps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyt-a%2Froute-replay-googlemaps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyt-a%2Froute-replay-googlemaps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyt-a%2Froute-replay-googlemaps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skyt-a","download_url":"https://codeload.github.com/skyt-a/route-replay-googlemaps/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyt-a%2Froute-replay-googlemaps/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33536651,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"ssl_error","status_checked_at":"2026-05-26T15:22:15.568Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["googlemap","react","reactjs","typescript"],"created_at":"2025-12-25T08:44:16.394Z","updated_at":"2026-05-26T19:31:58.735Z","avatar_url":"https://github.com/skyt-a.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[English](./README.md) | **日本語**\n\n# GoogleMaps Route Replay\n\n[![Deploy VitePress Docs to GitHub Pages](https://github.com/skyt-a/route-replay-googlemaps/actions/workflows/deploy-docs.yml/badge.svg)](https://github.com/skyt-a/route-replay-googlemaps/actions/workflows/deploy-docs.yml)\n\nGoogle Maps 上で時間情報付きのルートデータを再生するためのライブラリです。\n\nhttps://github.com/user-attachments/assets/c024a0e5-4d4a-43f5-88bc-e8c5e16e4110\n\nデモ: https://gm-route-replay-react-vite.vercel.app\n\n## ドキュメント\n\n詳細な API リファレンスと使用例については、以下のドキュメントサイトを参照してください。\n\n**[GoogleMaps Route Replay Documentation](https://skyt-a.github.io/route-replay-googlemaps/ja/)**\n\n## 特徴\n\n*   **選べるレンダラー:** \n    *   デフォルト: 標準の `google.maps.Marker` を使用し、シンプルに利用可能。\n    *   オプション: 大量のマーカー描画に `google.maps.WebGLOverlayView` を使用し、高パフォーマンスを実現。\n*   **Multi-track:** 複数のルートデータを同時に再生\n*   **柔軟なカメラ制御:** 固定、追従、進行方向前方など、複数のカメラモード\n*   **シンプルな API:** コアライブラリと React Hook を提供\n*   **TypeScript:** 型定義による安全な開発\n\n## インストール\n\n```bash\n# コアライブラリ\nnpm install route-replay-googlemaps-core\nyarn add route-replay-googlemaps-core\npnpm add route-replay-googlemaps-core\n\n# React Hook (React を使用する場合)\nnpm install route-replay-googlemaps-react\nyarn add route-replay-googlemaps-react\npnpm add route-replay-googlemaps-react\n```\n\n## 基本的な使い方 (React Component)\n\n```tsx\nimport React, { useRef, useState, useEffect } from 'react';\nimport { Loader } from \"@googlemaps/js-api-loader\";\nimport { RouteReplay, RouteReplayHandle } from \"route-replay-googlemaps-react\";\nimport type { RouteInput } from 'route-replay-googlemaps-core';\n\nfunction MapComponent() {\n  const [mapInstance, setMapInstance] = useState\u003cgoogle.maps.Map | null\u003e(null);\n  const replayHandleRef = useRef\u003cRouteReplayHandle\u003e(null);\n  const apiKey = 'あなたのGoogle Maps APIキー';\n  const mapId = 'あなたのMap ID';\n\n\n  useEffect(() =\u003e {\n    const loader = new Loader({ apiKey, version: 'weekly', libraries: ['maps'] });\n    loader.importLibrary(\"maps\").then((google) =\u003e {\n      const map = new google.Map(document.getElementById(\"map\")!, {\n        center: { lat: 35.68, lng: 139.76 },\n        zoom: 15,\n        mapId: mapId,\n      });\n      setMapInstance(map);\n    });\n  }, [apiKey]);\n\n  const routeData: RouteInput = [\n    { lat: 35.68, lng: 139.76, t: Date.now() },\n    { lat: 35.68, lng: 139.77, t: Date.now() + 10000 },\n\n  ];\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv id=\"map\" style={{ height: '400px', width: '100%' }} /\u003e\n      {mapInstance \u0026\u0026 (\n        \u003cRouteReplay\n          ref={replayHandleRef}\n          map={mapInstance}\n          route={routeData}\n          autoFit={true}\n        /\u003e\n      )}\n      \u003cbutton onClick={() =\u003e replayHandleRef.current?.play()} disabled={!mapInstance}\u003e\n        再生\n      \u003c/button\u003e\n      \u003cbutton onClick={() =\u003e replayHandleRef.current?.pause()} disabled={!mapInstance}\u003e\n        一時停止\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## 基本的な使い方 (コアライブラリ)\n\nReact を使用しない場合は、コアライブラリを直接利用できます。\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eGoogleMaps Route Replay Core Example\u003c/title\u003e\n    \u003cstyle\u003e\n        #map { height: 400px; width: 100%; }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1\u003eGoogleMaps Route Replay Core Example\u003c/h1\u003e\n    \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n    \u003cbutton id=\"playBtn\"\u003ePlay\u003c/button\u003e\n    \u003cbutton id=\"pauseBtn\"\u003ePause\u003c/button\u003e\n    \u003c!-- Replace YOUR_GOOGLE_MAPS_API_KEY --\u003e\n    \u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY\u0026callback=initMap\u0026libraries=geometry\u0026v=weekly\" defer\u003e\u003c/script\u003e\n    \u003c!-- Load your bundled script that includes the code below --\u003e\n    \u003cscript type=\"module\" src=\"./core-example.js\"\u003e\u003c/script\u003e \n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript: core-example.js\nimport { GmRouteReplayOverlay } from 'route-replay-googlemaps-core';\n\nlet map;\nlet replayOverlay;\n\nfunction initMap() {\n  map = new google.maps.Map(document.getElementById(\"map\"), {\n    center: { lat: 35.68, lng: 139.76 },\n    zoom: 14,\n    mapId: 'YOUR_MAP_ID'\n  });\n\n  const routeData = [\n    { lat: 35.680, lng: 139.760, t: Date.now() },\n    { lat: 35.680, lng: 139.770, t: Date.now() + 10000, heading: 90 },\n    { lat: 35.685, lng: 139.770, t: Date.now() + 20000, heading: 0 },\n    { lat: 35.685, lng: 139.760, t: Date.now() + 30000, heading: 270 },\n    { lat: 35.680, lng: 139.760, t: Date.now() + 40000, heading: 180 },\n  ];\n\n  replayOverlay = new GmRouteReplayOverlay({\n    map: map,\n    route: routeData,\n    autoFit: true,\n  });\n\n\n  replayOverlay.setMap(map);\n\n\n  replayOverlay.addEventListener('ready', () =\u003e {\n    document.getElementById('playBtn')?.addEventListener('click', () =\u003e replayOverlay?.play());\n    document.getElementById('pauseBtn')?.addEventListener('click', () =\u003e replayOverlay?.pause());\n  });\n}\n\nwindow.initMap = initMap;\n```\n\n## ライセンス\n\n[ISC](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyt-a%2Froute-replay-googlemaps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskyt-a%2Froute-replay-googlemaps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyt-a%2Froute-replay-googlemaps/lists"}