Google Maps API V3 や OpenLayers を使ったツール

Google Maps API V3 (JavaScript) や OpenLayers を使って,Google Map や地理院地図上に経路の作成やルートの検索をするページを作ってみました。
web で検索していろいろな人のサイトを参考にし,以下のサイトを参考にしました。
Google Maps API V3 の Reference ページを参考にしました。
OpenLayers:OpenLayers のサイト
 
Google Map で経路データ作成 Google Maps の KML ファイルに経路点を手動で作成するツール
 ・経路を1点ずつマウスクリックで指定すると,経路線上の点の Lng,Lat (経度,緯度) を数値で表示
 ・複数の経路を指定可能
 ・LngLat Display 欄にデータを書き込んで,読みこませる事も可能
 ・経路線の表示色,太さ,不透明度を変更可能
 ・指定した点を新しい方から1個ずつ減点可能
 ・高度情報を追加可能(2回ボタンを押さないと何故かうまくいかず)
Google Map によるルート検索

旧バージョン(始終点にピン無し)
Google Maps API によるルート検索(マウスクリックによる点の指定)
 ・出発点,到着点,経由地は,ラジオボタンをチェックしておいてから,地図上をマウスクリックで指定
 ・マウスクリックで得られた出発点,到着点,経由地は Lat,Lng (緯度,経度) となる
 ・出発点,到着点,経由地は,Lat,Lng (緯度,経度) 以外にも,住所や名称をキーボードでも入力可
 ・検索後に経路線の Lng,Lat (緯度経度が逆順) が数値データとして表示される。
 ・検索後にドラッグでルート変更可能
 ・検索後やドラッグによる変更後に,経路線の Lng,Lat (緯度経度が逆順) の数値データは自動更新される
 ・走行用のルート詳細を表示
地理院地図で経路データ作成1
OpenLayers 3 version
(ol.geom.MultiLineString)
地理院地図上に経路点を手動で作成するツール
 ・経路を1点ずつマウスクリックで指定すると,経路線上の点の Lng,Lat (経度,緯度) を数値で表示
 ・LngLat Display 欄にデータを書き込んで,読みこませる事も可能
 ・地図本体の不透明度を変更可能
 ・指定した点を新しい方から1個ずつ減点可能
地理院地図で経路データ作成2
OpenLayers 3 version
(ol.interaction.Draw)
(ol.interaction.Modify)
地理院地図上に経路点を手動で作成するツール途中の点を修正可能
 ・経路を1点ずつマウスクリックで指定すると,経路線上の点の Lng,Lat (経度,緯度) を数値で表示
 ・LngLat Display 欄にデータを書き込んで,読みこませる事も可能
 ・地図本体の不透明度を変更可能
 ・既存の経路の途中を修正可能
 ・指定した点を新しい方から1個ずつ減点可能
地理院地図で経路データ作成3
OpenLayers 3 version
(ol.interaction.Draw)
(ol.interaction.Modify)
地理院地図上に経路点を手動で作成するツール途中の点を修正可能
 ・経路を1点ずつマウスクリックで指定すると,経路線上の点の Lng,Lat (経度,緯度) を数値で表示
 ・LngLat Display 欄にデータを書き込んで,読みこませる事も可能
 ・地図本体の不透明度を変更可能
 ・既存の経路の途中を修正可能
 ・指定した点を新しい方から1個ずつ減点可能
 ・高度情報を取得した地図ページを作って,遷移する
地理院地図で経路データ作成3-2
OpenLayers 3 version
(ol.interaction.Draw)
(ol.interaction.Modify)
暴れた GPS ログの修正に使用
地理院地図上に経路点を手動で作成するツール途中の点を修正可能
 ・経路を1点ずつマウスクリックで指定すると,経路線上の点の Lng,Lat (経度,緯度) を数値で表示
 ・LngLat Display 欄にデータを書き込んで,読みこませる事も可能
 ・地図本体の不透明度を変更可能
 ・既存の経路の途中を修正可能:既存の点にマーカーを置き,変更具合がわかる(動作は重い)
 ・指定した点を新しい方から1個ずつ減点可能
 ・高度情報を取得した地図ページを作って,遷移する