Android端末とPCを接続し、USB接続モードに設定します。USBストレージをONにし、PCからデータを読めるように設定します。
フォルダーを開いてファイルを表示します。
jp.itanonb.maplogalbum2/logフォルダーから任意の日付のlog(2013-11-18)を選択し、デスクトップにコピーします。
このファイルにはlogのデータ(緯度、経度、時刻、等)がcsv形式で保存されています。
次の手順でkml方式のフォーマットに変換します。KMLフォーマットの列順を(整理番号(0)、場所の名前(連番)、メモ(時刻)、経度、
緯度、高度(0))に整理しなおして、以下の変換ソフトを使用します。
csvファイルに変換の時、完成ファイル名をtakaosan20131118.csvとし、更にtakaosan20131118.txtに変更すると、カンマで区切られた
データが見れます。
KML方式とは
KMLファイルとは、緯度・経度等の情報をXML形式で記述して地理情報を機械的に伝達出来るファイルです。
KMLとは「Keyhole Markup Language」の略です。「Keyhole」というのはGoogle Earthの旧名だったそうです。
つまり、KMLファイルはGoogle Earth上で展開するためのファイルです。当然Googleによってサポートされています。
拡張子は「.kml」となります。
変換ツール
Webに公開されている、Googleマップ KML/CSV相互変換ソフトhttp://tool.stabucky.com/gmap_kml2csv.htmを使います。
先ほどの、logデータ(csv方式)をkml方式に変換し、takaosan20131118.kmlファイル名で保存します。
以下の.htmlファイルでこの.kmlファイルを参照しています。
高尾山(takaosan20131118.html)を作成します。
以下のプログラムをコピーして、同名でファイルを作成し、保存します。
<html> <head> <title>高尾山</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&hl=ja"></script> <script type="text/javascript" </script> function initialize() { var initPos = new google.maps.LatLng(35.127152, 138.910627); var myOptions = { noClear : true, center : initPos, zoom : 10, mapTypeId : google.maps.MapTypeId.ROADMAP }; var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var kmlUrl = "http://www.itanonb.mydns.jp/takaosan/takaosan20131118.kml"; var kmlLayer = new google.maps.KmlLayer(kmlUrl); kmlLayer.setMap(map_canvas); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:800px; height:600px"></div> 高尾山南周回コースを縦走しました。 </body> </html>
FFFTP等でhtmlファイルとkmlファイルをサーバーに登録します。
JavaScriptファイル(takaosan20131118_js.html)を作成します。
以下のプログラムをコピーして、同名でファイルを作成し、保存します。
<html> <head> <title>高尾山log_js</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&hl=ja"></script> <script type="text/javascript" src="log_data.js"></script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:600px"></div> <h3>2013年11月18日高尾山に行ってきました。</h3> <ol> <li>地図上の青いマーカーは、スマホのGPSログ機能で自動取得した行程マップです。一部の箇所で往復データの重なりがあります。<br> マーカーをクリックすると時刻データを表示します。</li> <li>地図の拡大縮小はマウスでも自由に出来ます。</li> <li>赤マーカーをクリックするとそこで撮った写真を表示します。</li> </ol> <A href="/itakobo">ホームにに戻る</A> </body> </html>
JavaScriptファイル(log_data.js)を作成します。
以下のプログラムをコピーして、同名でファイルを作成し、保存します。
function initialize() { var initPos = new google.maps.LatLng(35.637314, 139.29158); var myOptions = { noClear : true, center : initPos, zoom : 10, mapTypeId : google.maps.MapTypeId.ROADMAP }; var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var kmlUrl = "http://www.itanonb.mydns.jp/takaosan/takaosan20131118.kml";//ログファイル(kml)を表示 var kmlLayer = new google.maps.KmlLayer(kmlUrl); kmlLayer.setMap(map_canvas); var marker1 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(36.18976774930737, 137.8218557739258) }); var marker2 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(36.12192640724847, 137.62497626781464) }); var marker3 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(36.12442228249292, 137.55358659267426) }); var marker4 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(36.121857076247956, 137.55708419322968) }); var marker5 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(36.1272300472935, 137.55985223293305) }); var infoWindow = new google.maps.InfoWindow;//InfoWindowのインスタンス化 var onMarkerClick1 = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent('<img width="240" height="180" src="CIMG1890.JPG" align="left" />新島々で2時間休憩(バス時刻が秋用に変わっていた。'); infoWindow.open(map_canvas, marker); }; var onMarkerClick2 = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent('<img width="240" height="180" src="CIMG1892.JPG" align="left" />乗鞍観光センター、山は晴れて来たようだ。'); infoWindow.open(map_canvas, marker); }; var onMarkerClick3 = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent('<img width="240" height="180" src="CIMG1898.JPG" align="left" />乗鞍畳平、天気は上がってくれたが北からの風が強い。少なくとも剣が峰は上りたかったが、もう遅い。'); infoWindow.open(map_canvas, marker); }; var onMarkerClick4 = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent('<img width="240" height="180" src="CIMG1907.JPG" align="left" />富士見岳、霧の動きが激しい。'); infoWindow.open(map_canvas, marker); }; var onMarkerClick5 = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent('<img width="240" height="180" src="CIMG1909.JPG" align="left" />大黒岳、残念ながら穂高岳方面は望めず。'); infoWindow.open(map_canvas, marker); }; google.maps.event.addListener(map_canvas, 'click', function() { infoWindow.close(); }); google.maps.event.addListener(marker1, 'click', onMarkerClick1); google.maps.event.addListener(marker2, 'click', onMarkerClick2); google.maps.event.addListener(marker3, 'click', onMarkerClick3); google.maps.event.addListener(marker4, 'click', onMarkerClick4); google.maps.event.addListener(marker5, 'click', onMarkerClick5); };