私だけの世界地図(1)

長年ぼんやり夢みてきた「私だけの世界地図」の制作を開始しました。
地図が好きで特にGoogleMapsが好きで、写真が好きで、GPSモノが好きで、
旅行（トレッキング）が好きで、プログラマな私が作る私だけの世界地図です。
ヽ(*´∀｀*)ﾉ
まだゴールは見えていません。作りながら落としどころを考えていこうと思っています。
これ→私だけの世界地図(1)
JSの勉強をしながらやってます。
現在の要件は、
・GoogleMaps
・Geoタグ付きの写真
です。
まず第1フェーズは、「画像のExif情報から緯度経度を取ってきて、GooogleMaps上にプロット。」
までしました。いまのところのこだわりは、
・DB使わない！
・サーバサーバサイドのプログラム使わなーい。
です。でも次のフェーズできっとサーバサイドのスクリプト使います。。。
こないだ行った御岳山と、トルコのカッパドキアの写真だけプロットしてあります。
旅先での記録でも書いたように、旅先って特に海外ではネット環境がひたすら悪いので、オンラインじゃ動かないのは×。
現状は、iPhoneで撮った写真をチビすな !!っていうExif情報を保持したままリサイズするソフトでリサイズしてFTPでアップした画像を使っています。
以下ポイント。

1. binaryajax.js, exif.jsでExif情報がとれます。

Nihilogic : Javascript EXIF Reader – jQuery Plugin
jQuery EXIF data plugin – Nihilogic
ここを参考にしました。
[code language=”Javascript”]
$(‘.photo’).each(function() {
var sel_id = $(this).attr(‘id’);
var img = document.getElementById(sel_id);
var exif = new Exif( img );
exif.load( function(){
// Exif情報とって、GoogleMapsにプロットする処理
});
});
[/code]
しかしIEで動かず。
exif.js745行目、!_image.completeのところでfalse返してるのです。
imgのloadイベントにバインドしているのにもかかわらず、IEではcompleteしてない。
↓ココ
[code language=”Javascript”]
if( !_image.complete || _isLoaded ) { return false; }
[/code]
ぐぐってみたかんじ、setTimeout使って逃げるのがいいそうです。↓
[code language=”Javascript”]
$(‘.photo’).each(function() {
var sel_id = $(this).attr(‘id’);
var img = document.getElementById(sel_id);
var exif = new Exif( img );
setTimeout(function(){
exif.load( function(){
// Exif情報とって、GoogleMapsにプロットする処理
});
}, 500);
});
[/code]

2.Exifの緯度経度は度分秒形式

Exif情報で保存されている緯度経度の形式と、Googlemapsなどで使う形式が
違うので、変換します。
たとえば御岳山は、
緯度(数値) : 35ﾟ 47.39 [DM] → 35度47.39分
経度(数値) : 139ﾟ 9.21 [DM] → 139度9.21分
※秒はこのライブラリではとれてないぽいです。
これを百分率(%)に直すには、以下の式で出ます。
度＋分/60+秒/3600
つまり御岳山は、
緯度:35.789833
経度：139.153500
です。

3.マーカーを画像にしてプロット

ちょいちょい。
[code lang=”Javascript”]
var mki = new google.maps.MarkerImage( params.src, new google.maps.Size( x, y), null, new google.maps.Point( x/2, y/2 ));
var pos = new google.maps.LatLng(lat, lng);
var mk = new google.maps.Marker({position:pos, icon:mki, map:gMap, title:params.alt});
[/code]
ビビったのは高度。御岳山より、カッパドキアの方が高いんだー。
ちなみに高度と標高ってどう違うのって思ったら、Yahoo知恵袋にありました。

標高、高度、海抜・・・は同じですか？
高度・・・海水面はどこでもよい
海抜・・・満潮時と干潮時の平均が基準
標高・・・基準となる海水面がある