{"id":32932937,"url":"https://github.com/hiroaki/maps.gpx","last_synced_at":"2026-02-01T06:03:48.257Z","repository":{"id":138845644,"uuid":"38965078","full_name":"hiroaki/maps.gpx","owner":"hiroaki","description":"A small framework of JavaScript to overlay GPX on Google Maps embedded HTML page","archived":false,"fork":false,"pushed_at":"2016-02-04T16:21:33.000Z","size":1542,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-11-11T18:47:40.252Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/hiroaki.png","metadata":{"files":{"readme":"README-ja.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-12T14:39:58.000Z","updated_at":"2025-04-14T17:40:06.000Z","dependencies_parsed_at":"2023-04-27T03:54:37.710Z","dependency_job_id":null,"html_url":"https://github.com/hiroaki/maps.gpx","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/hiroaki/maps.gpx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiroaki%2Fmaps.gpx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiroaki%2Fmaps.gpx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiroaki%2Fmaps.gpx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiroaki%2Fmaps.gpx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hiroaki","download_url":"https://codeload.github.com/hiroaki/maps.gpx/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiroaki%2Fmaps.gpx/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28970194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T05:48:53.985Z","status":"ssl_error","status_checked_at":"2026-02-01T05:47:55.855Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":[],"created_at":"2025-11-11T18:47:32.000Z","updated_at":"2026-02-01T06:03:48.252Z","avatar_url":"https://github.com/hiroaki.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# maps.gpx\n\nGoogle Maps JavaScript API で GPX を扱うためのライブラリ、およびそれを用いた HTML5 アプリケーションです。\n次のニーズに応じます：\n\n* GPX を扱う地図を使う\n* GPX を扱う地図を作る\n\n\n## 使う\n\n`viewer.html` は GPS 位置情報のポピュラーなデータフォーマットである GPX データを、地図上に表示する手軽なビューワーです。\n\nHTML5 をサポートするモダンなブラウザで `viewer.html` を開き、地図上に GPX ファイルをドラッグ＆ドロップしてください。\n\nデモ・ページで実際に使ってみることができます。\n\n[http://hiroaki.github.io/projects/mapsgpx/viewer.html](http://hiroaki.github.io/projects/mapsgpx/viewer.html)\n\n### 主な特徴\n\n* すべてクライアント・サイドだけで動作します。（モダンなブラウザ上で）\n* `viewer.html` をブラウザで開くだけで準備完了。\n* データファイルをドラッグ＆ドロップで入力。その際、複数のファイルを、同時に。\n* GPX データの表示のオフ・オン。\n* 標高グラフ表示。\n* GPS センサーによる現在位置の表示。\n* モバイル対応。レスポンシブ。画面サイズ（＝地図サイズ）は自在です。\n\n### 入力データ\n\n* GPX ファイル\n* EXIF に位置情報を持った JPEG 画像ファイル\n* （将来はほかのデータ形式も扱えるようにしたい考えです）\n\nJPEG は位置情報を持っていなくとも撮影日時の情報を持っていれば、先行して入力した GPX データのトラックの日時情報から、画像の撮影位置を特定することができます。\n\n### その他の情報\n\nまた紹介記事をブログに書きましたので、参考にしてください。（この記事ではタイトルが旧プロジェクト名の \"GPX Casual Viewer v3\" となっています）\n\n[http://hiroaki.github.io/blog/2015/0429/gpx-casual-viewer-v3/](http://hiroaki.github.io/blog/2015/0429/gpx-casual-viewer-v3/)\n\n[http://hiroaki.github.io/blog/2015/0721/maps-dot-gpx-a-dot-k-a-gpx-casual-viewer/](http://hiroaki.github.io/blog/2015/0721/maps-dot-gpx-a-dot-k-a-gpx-casual-viewer/)\n\n\n## 作る\n\nこのプロジェクト maps.gpx の要は Google Maps JavaScript API v3 を用いた JavaScript ライブラリ `maps-gpx.js` です。\n\n地図上に位置情報データを操作するための様々な機能を提供するもので、プログラミングをなるべくしなくても済むように、プラグインの形で機能を拡張していくスタイルで、注意深く設計されています。\n\nもちろん、プログラミング要望に応じられるように API を用意しており、各機能を（プラグインに依らずに）直接操作することもできます。\n\n上述した `viewer.html` は `maps-gpx.js` を用いたアプリケーションの例のひとつにすぎません。（ほかの例が `samples` ディレクトリにあります。）\n\n以下はその主要 JavaScript ライブラリ `maps-gpx.js` の説明です。 `docs` ディレクトリ内には API リファレンスがありますので、併せて参照してください。\n\n\n### 使い方\n\nまず最初に Google Maps API をロードします。その際、 `geometry` ライブラリを使うように指定します。\n\nメモ：以前は \"sensor\" パラメータが必須とされていましたが、いまはもう不要です。\n\nそれから `maps-gpx.js` をロードします。これにより、クラス `MapsGPX` が定義されます。\n\n```\n\u003cscript src=\"http://maps.google.com/maps/api/js?libraries=geometry\"\u003e\n\u003c/script\u003e\n\u003cscript src=\"maps-gpx.js\"\u003e\n\u003c/script\u003e\n```\n\n一般のウェブ・アプリケーションと同じく、 HTML ドキュメントのロードが完了することを待ってから、\nアプリケーションを開始させることは理にかなっています。\n\nそのために、 `MapsGPX` のクラス・メソッド `onReady` を利用してください。\nこれは document の `load` イベントを待ってから、コードを実行することを保証します。\n\n```\nMapsGPX.onReady(function (){\n  // ここにアプリケーションのロジックを書きます。\n});\n```\n\n`MapsGPX` のコンストラクタには Google Maps API の `google.maps.Map` クラスの、\nインスタンス化に必要なパラメータと同じものを渡すことができます。\n\n必須の最初の引数は、地図の描画領域である要素（ `div` タグ）の ID です。\n\n省略可能な第二の引数はハッシュ形式で、そのまま `google.maps.Map` をインスタンス化する際の[オプション](https://developers.google.com/maps/documentation/javascript/reference?hl=ja#MapOptions)になります。\n省略された場合は `MapsGPX` が定義しているデフォルト値が使われます。\n\n```\n\u003cdiv id=\"map_canvas\"\u003e\n\u003c/div\u003e\n\u003cscript\u003e\nMapsGPX.onReady(function (){\n  var app = new MapsGPX('map_canvas');\n  // ...\n});\n\u003c/script\u003e\n```\n\nこれで、地図の準備ができました。この地図に GPX データを与え、オーバーレイしましょう。\n\nGPX を与えるとき、そのソースには次の形があります：\n\n* GPX のテキスト・データを直接\n* GPX をバイナリ・オブジェクト経由で（ Blob または File オブジェクト）\n* URL 経由で\n\nそれぞれ、インスタンス・メソッドが用意されています。\n\n* `addGPX`\n* `input`\n\nメソッド `addGPX` は GPX の内容のテキストを受け取る、最も低レベルの入力メソッドです。\n\nそれに対して高レベルの入力メソッド `input` は、Blob と URL の双方をカバーしており、\nそのオブジェクトが示す GPX の内容をメソッド `addGPX` に渡します。\n\nユーザ・インタフェースの部分はアプリケーション実装者に任せられますが、\nJavaScript コードを書く代わりに、別ファイルで用意されているプラグインを利用することもできます。\n\n* `Droppable`\n* `QueryURL`\n\nプラグイン `Droppable` は、 GPX ファイルを地図描画領域にドラッグ＆ドロップすることで、\nその File オブジェクトをメソッド `input` に渡すことを可能にするものです。\n\nプラグイン `QueryURL` は、ページの URL に付加されたクエリ・ストリングのパラメータ 'url' の値である URL を\nメソッド `input` に渡すものです。\n\nプラグインを利用可能にするには、 `MapsGPX` のインスタンスを `extend` （拡張）し、\nかつ `extended` （拡張が完了）したときのコールバックを登録します。\n\n```\napp.extend('Droppable');\napp.extend('QueryURL');\napp.extended(function() {\n  // ...\n})\n```\n\n`extend` にプラグインの名前を渡すと、そのプラグインが必要とする追加の JavaScript ファイル（および CSS ファイルがあればそれも）がロードされます。\n\nそして `extended` は、それまでに `extend` したプラグインのすべての準備が完了したあとに、\nコールバックが実行されることを保証します。\n\n言い換えると、 document の `load` がトリガーされても、プラグインの機能は、まだ準備できていない可能性があります。\nしたがって、全体的には次のようになるでしょう：\n\n```\nMapsGPX.onReady(function() {\n  // ここは document の load 完了時\n  new MapsGPX('map_canvas')\n    .extend('Droppable')\n    .extend('QueryURL')\n    .extended(function() {\n      // すべてのプラグインの準備が完了したここに、\n      // アプリケーションのロジックを書きます。\n    });\n});\n```\n\n以下にいくつかの例を示します。併せて `samples` ディレクトリにある各 HTML ファイルも参考にしてください。\n\nそして様々な機能を提供する各種プラグインを組み合わせたり、\n`MapsGPX` のインスタンスが提供するメソッドなどを用いて、アプリケーションを完成させてください。\n\nAPI ドキュメントは `docs` ディレクトリにあります。\n\n\n### 例１\n\n次の例は、プラグイン `Droppable` を利用しています。\n\nブラウザのウィンドウに GPX ファイルをドラッグ＆ドロップすることで、\nその GPX データをマーカーとポリラインとしてオーバーレイするアプリケーションです。\n\nまた GPX が追加されたときのアクションとして、\nそのすべての地点が地図内に収まるように画面をフィットさせます。\n\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\u003chead\u003e\u003cmeta charset=\"UTF-8\"/\u003e\n\u003ctitle\u003emaps.gpx\u003c/title\u003e\n\u003cstyle\u003e\nhtml, body, #map_canvas { width: 100%; height: 100%; margin: 0px; padding: 0px; }\nimg.info-window { max-width: 200px; max-height: 200px; }\n\u003c/style\u003e\n\u003cscript src=\"http://maps.google.com/maps/api/js?libraries=geometry\"\u003e\u003c/script\u003e\n\u003cscript src=\"../maps-gpx.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nMapsGPX.onReady(function (){\n  new MapsGPX('map_canvas')\n    .extend('Droppable')\n    .extend('EXIF')\n    .extend('EXIF2GPX')\n    .extend('DescImage')\n    .extended(function(){\n      this.register('onAddGPX', function(key) {\n        this.fitBounds(key);\n        this.showOverlayGpxs(key);\n      });\n    });\n});\n\u003c/script\u003e\n\u003c/head\u003e\u003cbody\u003e\n  \u003cdiv id=\"map_canvas\"\u003e\u003c/div\u003e\n\u003c/body\u003e\u003c/html\u003e\n```\n\nこの例は `samples` ディレクトリの `viewer-droppable.html` の内容全てを示しています。\nブラウザで開き、実際に試してみてください。\n\nこの例が示すように、入力した GPX は追加しただけではオーバーレイされませんが、\nどのタイミングでも表示・非表示を行うことができます。\nここでは `onAddGPX` フックを利用して、入力と同時に表示させるようにしています。\n\nフックのコールバックに渡される `key` は、 GPX データを識別するためのユニークなキーです。\nメソッド `fitBounds` や `showOverlayGpxs` のその引数には、対象の GPX データのキーを指示することができます。\n\n\n### 例２\n\n次の例は、ページに埋め込まれた GPX の URL をロードし、\nその GPX のウェイポイントとトラックを、\nマーカーとポリラインとしてオーバーレイするアプリケーションです。\n\nこのパターンは、\nウェブログなどの CMS において、テンプレートから生成されるページの汎用的な地図に、\nGPX をパラメータとして与えたい場合に有用です。\n\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\u003chead\u003e\u003cmeta charset=\"UTF-8\"/\u003e\n\u003ctitle\u003emaps.gpx\u003c/title\u003e\n\u003cstyle\u003e\ndiv.map { width:640px; height:320px; }\nimg.info-window { max-width: 200px; max-height: 200px; }\n\u003c/style\u003e\n\u003cscript src=\"http://maps.google.com/maps/api/js?libraries=geometry\"\u003e\u003c/script\u003e\n\u003cscript src=\"../maps-gpx.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nMapsGPX.onReady(function() {\n  var $maps = document.getElementsByClassName('map'),\n      apps = [], i, l, url;\n  for ( i = 0, l = $maps.length; i \u003c l; ++i ) {\n    url = $maps.item(i).getAttribute('data-url');\n    apps[i] = new MapsGPX($maps.item(i).getAttribute('id'));\n    apps[i].input(url, url).then((function(key) {\n      this.fitBounds(key);\n      this.showOverlayWpts(key);\n      this.showOverlayTrks(key);\n    }).bind(apps[i]));\n  }\n});\n\u003c/script\u003e\n\u003c/head\u003e\u003cbody\u003e\n\n  \u003ch1\u003eJapan National Route 1\u003c/h1\u003e\n  \u003cdiv class=\"map\" id=\"R1\" data-url=\"R1.gpx\"\u003e\u003c/div\u003e\n\n  \u003ch1\u003eWalking The Lake Biwa Canal\u003c/h1\u003e\n  \u003cdiv class=\"map\" id=\"sosui\" data-url=\"Biwakososui.gpx\"\u003e\u003c/div\u003e\n\n\u003c/body\u003e\u003c/html\u003e\n```\n\nこの例は `samples` ディレクトリの `viewer-xhr.html` の一部を省いたものです。\n\nプラグインは用いず、 `MapsGPX` クラスのインスタンスの `input` メソッドとそのコールバックで、 GPX データを地図上に表示します。\n\nまたオーバーレイの表示のタイミングですが、これも GPX 追加時に行うようにしています。\nしかしさきほどの例とは手法が異なっていることに注目してください。\n\nそれから、この例にはもうひとつ特徴があります。それは、ページ内には地図のインスタンスを複数持てるということです。\nインスタンスは互いに独立していますので、それぞれの部分を別々に操作することができます。\n\n#### 注意\n\nHTML ファイルをブラウザで直接開いて実行している場合、プロトコル・スキームが `file` であるため、 Google Chrome では \"Cross origin requests\" の例外が発生し、期待通りの結果を得ることができません。\n\nただ、ウェブログなどの CMS でのコンテンツの配信は、ウェブ・サーバ経由すなわちプロトコル・スキームが `http` または `https` となりますから、その場合は期待通りの結果を得ることができるでしょう。\n\n\n# 参照\n\nGPX 1.1 Schema Documentation\n\u003chttp://www.topografix.com/gpx/1/1/\u003e\n\nGoogle Maps JavaScript API v3\n\u003chttps://developers.google.com/maps/documentation/javascript/\u003e\n\n\n# 著作権・ライセンス\n\n    maps.gpx\n      Copyright 2009-2015 WATANABE Hiroaki\n      Released under the MIT license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiroaki%2Fmaps.gpx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiroaki%2Fmaps.gpx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiroaki%2Fmaps.gpx/lists"}