GoogleMapsのクロスブラウザ問題

今回もShortest Path Graphicに新機能などを入れるためにいくつかクロスブラウザ問題が発生している。

一番重要なPolylineの表示だが、IEではデフォルトでは表示することが出来ない。

＜html xmlns="http://www.w3.org/1999/xhtml"＞

などをincludeする必要がある。

Operaでは

     echo("map.addOverlay(new GPolyline(points,'red',"5","0.7"));");

と言うように使えず、色の指定はRGB値を指定しなければならない。これだと青のラインが表示されてしまった。

大きな問題は上の2つくらいだろうか。
FirefoxでもJavascriptからHTML内のオブジェクトとつなげにくかったりといった直接は関係ないものもあったが、厳密に記述すれば解決できるのでそれを心がけていけばよい。

これだけブラウザが増えてしまうと実験だけでも一苦労だ。
特にIEはJavascriptが遅すぎてCPUファンはうなり出すわ結果は出ないわでストレスがたまります。
スタイルシートは一番IEが気持ちを読み取ってくれる気がしますけど。

個人的にはFirefoxメイン、Google系のアプリならGoogleChromeが良いかと思ってます。Chromeはセキュリティホールも結構見つかってるようですし。

GoogleMapsを使ってみる15

入出力をGoogleMapsにしたShortest Path Graphicも来週くらいには公開になりそうだ。

新バージョンの新機能等は以下の通り。

1,入力画面もGoogleMaps
2,入出力ともにマウスホイールでのZoomIn、ZoomOutに対応
3,出力画面の最初は入力画面の縮尺、中心座標で表示

2の機能マウスホイールに関しては、他のバージョンの出力にはすでに先行導入されている。前々から入れたかったのだが、APIをただ見逃していただけでした。

     map.enableScrollWheelZoom();

と入れるだけで実装できる。

3は今までは2点間の中心座標とZoom値11というようにしていた（特に何の根拠もない）。今回は入力もGoogleMapsということでそのような仕様にした。
今までのバージョンも中心だと道を外れる可能性もあり、始点を中心に表示するよう変更されるかもしれない。

GoogleMapsを使ってみる14

Shortest Path Graphicの入出力ともにGoogleMapsを用いたバージョンも作成が進んでいるようだ。

昨日の問題点1
クリックされた場所が地図にある保証がない（現時点であるのは全米のみ）

については地道な作業をすることでなんとか実装している。
GoogleMapsの機能として住所が分かればそこから緯度経度を出すことは可能なのだが、逆が出来ないようでちょっと面倒な作業になってしまった。

inUSAという関数を作り、戻り値が1ならUSA内（正確にはハワイとアラスカは除く）で0ならアウト。といったかんじ。
大まかには長方形で囲んで中にあるか外にあるかを判定。
それだけではカナダとの国境などが危ないので、もう少し判定を厳しくする。

カナダとの国境は幸い、大まかには緯度が同じ地図上で言う真横にひかれたラインと斜めにひかれた直線でいる。そのため、斜めの直線とクリックした点の右上右下判定だけすればある程度細の判断までできる。
厳密にはまだまだだが、実装レベルとしては悪くないのではないかと思う。
自分一人では何とも言えないので色々意見をもらうことになるだろう。

GoogleMapsを使ってみる13

GoogleMapsバージョンも公開されたShortest Path Graphicだが、どうやら次は入力部分もGoogleMapsに対応する予定のようだ。


入力にもGoogleMapsを使う意味や利点は以下の通り。
１，結果もGoogleMapsなのだから当たり前。
２，マーカーのドラッグ機能などを駆使できる。
３，拡大縮小が自由にできるため細かい値を指定しやすい。


問題点は以下の通り。

１，クリックされた場所が地図にある保証がない（現時点であるのは全米のみ）
２，すべての計算が全米になってしまうので負荷がかかる。


１はユーザーが正しいものを入力してくれると信じれば特に気にする必要はないため、実装は後にする方針。緯度経度の取得はできるので最低限なんとかなるだろうということもあり楽観視しているという噂もある。

２はとりあえず見ないことにする。P2Pバージョンに限定するなどの処置を取ることも場合によっては視野に入れる必要があるかもしれない。


利点の２について少し説明する。
基本的に今まで用いてきた技術を変えていけば作成可能になるが、ドラッグイベントの処理は少々面倒なので今まで使っていたのとは違い以下のようにしてみる。

  var newMarker = new GMarker(point, {draggable: true}); 

でドラッグできるマーカーが作成できる。

var map;
var marker_num=0;
var marker1=null;
var marker2=null;
var tmp_marker=null;
var marker1_tmp = null;

function eventMarker(point){
  map.closeInfoWindow();
  var newMarker = new GMarker(point, {draggable: true});
  if(marker_num % 2 == 1){
    tmp_marker = marker2;
    marker2 = newMarker;
  }
  else{
    tmp_marker = marker1;
    marker1 = newMarker;
  }
  GEvent.addListener(newMarker, "dragstart", function() {
      map.closeInfoWindowHtml();
  });

  GEvent.addListener(newMarker, "dragend", function() {
       var currentPoint = newMarker.getPoint();
       newMarker.openInfoWindowHtml("latitude: " + (currentPoint.lat()) + "
longitude: " + (currentPoint.lng()));
  });

  GEvent.addListener(newMarker, "click", function() {
       var currentPoint = newMarker.getPoint();
       newMarker.openInfoWindowHtml("latitude: " + (currentPoint.lat()) + "
longitude: " + (currentPoint.lng()));
  });
  map.addOverlay(newMarker);
  if(tmp_marker!=null)map.removeOverlay(tmp_marker);
  marker_num++;
}

また、load()関数の中で

    GEvent.addListener(map, "click", function(overlay, point){
  if(point){
    eventMarker(point);
  }
    });

しておけばよい。marker1とmarker2を使い、3つめのマーカーが作られたときに古い方のマーカーを消す作業を入れている。これは既存のShortest Path Graphicと同じような仕様だ。

参考：http://www.tatamilab.jp/~ooi1/GoogleSample5.html

GoogleMapsバージョン

例のページ(http://opt.indsys.chuo-u.ac.jp/portal/)でGoogleMapsを使用したバージョンもどうやら公開されたようだ。

公開はされたが、拡大を大きくすると若干のずれが生じてしまうのは今も変わらないのでメルカトル図法用の座標計算をし直すのを導入するしかない。

また、ほぼ同時に全バージョンで時間優先、距離優先の選択肢が追加されたようだ。
GoogleMapsのP2Pバージョンではその両方の結果を表示するオプションもついている。

Google Mapsの道検索

GoogleMapsの道検索では厳密な最短路は求めていない。
もちろん車で移動することを前提にしているならば、時間優先の探索になるであろうしその方が現実的だ。
データは違うものの時間優先検索で検索した結果と「ほぼ」同じになっている。
違う点は、GoogleMapsの方が分岐の近くでも大きな道路を選んでいる。

スタートとゴールの近くの大通りまで出てあとは大通りを進めばよいと言う発想だろう。
これを見ても時間優先の厳密解ではないと思われる。
そもそも、信号等の不確定な状況下なので厳密解まで必要ないということなのだろう。

理想

二つのマーカーを用意して、それらをドラッグ＆ドロップで動かしてその先までの最短路を（ほぼ）瞬時に表示するなんていうことができるならばそれはユーザー側にとってはありがたいし、カーナビへの応用も利くだろう。
実際はどこでプログラムを動かすか、ラインの表示はどうするか。再検索のときには今までのラインはどうするか。などといった問題が生じる。
あくまで理想の段階で、現時点で実装できる予定はない。
Browser側の進歩、各々のPCの進歩などでJavascriptですべて高速に計算できるのであれば実装はできそうだが現実的には難しい。

今後の方針

GoogleMapsバージョンも最低限は完成しているのでそろそろ公開になると思われる。

現時点で入力ページが今までと同じ画像表示になっていて、その名残から座標を使っている。結果表示のページではGoogleMapsのマーカーで座標表示ではなく緯度経度表示になっているため、なんだか変な感じがする。これらは入力側を修正することで対応したいと思う。

入力ページもGoogleMapsに関しては、良い方法があればすぐにでも採用したいんだが、なかなか思いつかないのが現状だ。

GoogleMapsを使ってみる12

GoogleMapsでは渋滞情報という機能がアメリカの方にはある。
各道路の渋滞情報を見ることが出来る機能で、おそらくGoogleがカーナビと連携して使うことになるのだと思われる。
map.addOverlay(trafficInfo);
で付け加えることが出来る。

直接最短路とは関係がないが、時間優先で最短路を求めてみると渋滞に巻き込まれやすいことがわかる。時間優先の最短路は、渋滞を考慮しているわけではなく最高速度で決まっているため、多くの人が最高速度が速い道を使っていると言うことだろう。
実際の速度とは大きく違うことになりそうだが。

Google Chrome

GoogleからGoogle Chromeというブラウザが出たので早速インストールしてみた。

別にGoogleのブログを使ってるから宣伝するというわけではないが、速さ重視と言うことで「最速」とも言われているFirefox3と比べて気になったというのもある。

Google ChromeはAppleのHTML描画が高速な「Webkit」を用いている。またJavaScriptを独自のV8エンジン（名前はV型8気筒エンジンに由来するらしい）を搭載して高速化を実現している。

残ったログを見てみるとユーザーエージェント（UA）は

AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

となっている。

Shortest Path Graphicの各バージョンで試してみたが問題なく動作することを確認している。

また、実際に動作させてみるとUSAのグラフで体感2倍くらいFirefoxより表示が速い。これは結構大きい。
GoogleMapsの拡大縮小などの処理はFirefoxより体感3倍くらい違っている。

どちらも正確に計ったわけではないが、体感速度というのはこういうサービスでは重要なことであろう。

機能面ではFirefoxの方が上であり、どちらを取るかはユーザー次第と言ったところか。

GoogleMapsを使ってみる11

今までの通常のShortest Path Graphicにもあった経由点を指定できるバージョン。
こちらもGoogleMapsに対応させるべく作業を進めている。

当初は、小一時間程度で終わると楽観視していたが、諸処に問題が発生することが次第に分かってきてだいぶ手間取っている。
座標の入力からクエリファイルの書き出しまではそのまま使用しているので問題はない。
プログラムに渡して出力が帰ってきてからが少々面倒になる。

前回の話にも出たマーカーはsetCenterの後でなければならないという仕様は意外に厄介な仕様になっている。
そもそも、Centerの位置をどこにしようかというのは難しいのだが・・。

GoogleMapsを使ってみる10

マーカーを使って緯度経度を表示するという話を前回したが、実際色々やってみると表示されないことがあり原因を調べてみた。

       var source_info = 'hoge';
       var dist_info = 'hogehoge';
       var marker1 = new makeMarker(point_source, source_info);
       var marker2 = new makeMarker(point_dist, dist_info);

これはどこにいれてもいいというわけではなく、

map.setCenter(new GLatLng(41.2,-73.55), 11);

のようにsetCenterメソッドを先にいれる必要があるらしい。
そうしないとJavaScript側でエラーを返されてしまう。
なぜそのような仕様かはGoogleに聞かないと分からないですが。
これに気づくのに時間がかかりすぎてしまい、後々手間取ることになってしまいました。

GoogleMapsを使ってみる9

GoogleMapsのOpenInfoWindowを使用して始点と終点に緯度経度を付け加えてみた。

     function makeMarker(point , info_text){
       var marker = new GMarker(point);
       GEvent.addListener(marker, "click" ,function(){
     marker.openInfoWindow(info_text);
       });
       return marker;
     }

このように、関数を使って、イベントを作成しておくと後が楽。

       var source_info = 'hoge';
       var dist_info = 'hogehoge';
       var marker1 = new makeMarker(point_source, source_info);
       var marker2 = new makeMarker(point_dist, dist_info);

とすれば実際にマーカーが表示される。
この場合、point_sourceなどは、GLatLngでセットしておく必要がある。
HTMLタグを使いたいときは上の方のOpenInfoWindowをOpenInfoWindoHtmlにすればよい。

参考：http://japonyol.net/editor/googlemaps.html

GoogleMapsを使ってみる8

GoogleMapsバージョンで新しく加えようと思っている機能（すでに実装されているものもあり）は以下の通りだ。

・距離としての最短路を求めるか時間（速度制限等を考慮）を最短にする道かを選択。
両方同時も考えているが、問題が生じる可能性もあり詳細は考え中。

・各マーカーに緯度軽度の情報を加える。
GoogleMapsのOpenInfoWindowを使用。

・入力された始点と終点が両方表示される縮尺に自動変更。
緯度経度の値から計算するしかない。
現在は適当な縮尺で固定して、中心は2点間の中心にしている。