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相互変換ソフトを使います。
先ほどの、logデータ(csv方式)をkml方式に変換し、takaosan20131118.kmlファイル名で保存します。
以下の.htmlファイルでこの.kmlファイルを参照しています。
メモと写真はsqliteデータベースに保存されています。
sqliteデータはjp.itanonb.maplogalbum2/tbl20131118.dbフォルダーに保存されています。
このままでは処理できませんので、変換ツールを使ってcsvデータに変換して使います。
変換ツール
Webに公開されている、SQLite Database Browserを使います。
こちらからダウンロードしてご自分のPCにインストールして下さい。
先ほどの、tbl20131118.dbをこのツールで変換し、takaosan20131118sqlite.csvファイル名で保存します。
中身は、logのid番号、緯度経度データ、時刻、メモ、写真(object_blob)が一覧表に書かれています。
メモの内容をコピーして、それぞれの地点のInfoWindowに貼り付けます。写真のデータはこの一覧には中身がありません。
抽出したスマホデータのギャリーデータフォルダー(DCIM)の中に保存されているはずです。
その中から該当する写真をメモと同様にそれぞれ貼り付けます。
以上のように、web画面のプログラムにメモと写真データを記入して完了です。
高尾山メモ写真付き(takaosan_wmp.html)を作成します。
<html> <head> <title>高尾山wM&P</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:800px; height:600px"></div> <h3>高尾山登山のメモ/写真付きのWEBページです。</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(35.632633, 139.270317) }); var marker2 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(35.631254,139.267867) }); var marker3 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(35.626149,139.257174) }); var marker4 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(35.624734,139.243404) }); var marker5 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(35.626362,139.229429) }); var marker6 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(35.629884,139.2214) }); var marker7 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(35.629621,139.220721) }); var marker8 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(35.614016,139.231143) }); var marker9= new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(35.605689,139.243455) }); var marker10 = new google.maps.Marker({ map: map_canvas, position: new google.maps.LatLng(35.609227,139.268775) }); 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="1384759718315.jpg" align="left" />高尾山口駅'); infoWindow.open(map_canvas, marker); }; var onMarkerClick2 = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent('<img width="240" height="180" src="1384759718461.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="1384759718583.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="1384759718714.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="1384759718806.jpg" align="left" />一丁平の秋'); infoWindow.open(map_canvas, marker); }; var onMarkerClick6 = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent('<img width="240" height="180" src="1384759718942.jpg" align="left" />城山山頂'); infoWindow.open(map_canvas, marker); }; var onMarkerClick7 = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent('<img width="240" height="180" src="1384759718942.jpg" align="left" />いつもの休憩場'); infoWindow.open(map_canvas, marker); }; var onMarkerClick8 = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent('<img width="240" height="180" src="1384759719260.jpg" align="left" />おおぼら山'); infoWindow.open(map_canvas, marker); }; var onMarkerClick9 = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent('<img width="240" height="180" src="" align="left" />見晴らし台'); infoWindow.open(map_canvas, marker); }; var onMarkerClick10 = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent('<img width="240" height="180" src="1384759719367.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); google.maps.event.addListener(marker6, 'click', onMarkerClick6); google.maps.event.addListener(marker7, 'click', onMarkerClick7); google.maps.event.addListener(marker8, 'click', onMarkerClick8); google.maps.event.addListener(marker9, 'click', onMarkerClick9); google.maps.event.addListener(marker10, 'click', onMarkerClick10); };
FFFTP等でhtmlファイル,kmlファイル、jsファイルをサーバーに登録します。