つい先日からバンコクのバスマップをオンライン化する作業を行おうと一生懸命でしたが、このタイミングで見つけてしまった、このサイト。。。。
Tang.in.th : รถเมล์สาย 6 พระประแดง – บางลำภู
うっかりしておりました。タイ人でPC使えて、ウェブページ作れる奴ってある程度の学校出ててバスなんか乗らないと思っててタイ語でバス経路の検索を行ってなかったが、なんと作ってる奴が居たとは！しかもかなり精度のよいバス経路のようだ。まさかしらみつぶしにひとつずつちゃんと乗って経路を確かめているのだろうか？？
そういう中、「このバス経路の情報、頂けないかな？」と考えて、他人のWebサイトに掲載されているGoogle Mapの情報を抜く方法があるかを調べてみた。そしたら、このサイト、iframeを使ってGoogle Mapを埋め込んでいる。JavaScriptのGoogle Map APIで実装してるならHTMLのソース見るだけでコピペ出来てしまうがiframeの場合はどうしたらいいのか？
iframeでブログなんかに埋め込んだgoogle mapのpolylineの経路情報はページのソースを見たところでわからないようになっていますが、iframeで埋め込んでたって埋め込まれたページ自体はやっぱりJavascriptを使って表示しているはず。そのページのソースをみてiframeの中のページがどのような引数でもって取得しているのかを確認します。ソース表示させてiframeでページ内検索をすれば<iframe src=”http://maps.google.co.jp/maps~~~~~>となっているはずなので、その引数を以下のフォーマットに置き直します。
http://maps.google.com/maps/ms
?oe=UTF-8
&ie=UTF8
&hl=en
&msa=0
&ll=13.758508,100.500312
&spn=0.003064,0.004592
&z=18
&msid=205881149876572396573.00049ce1634b5368c9240
(見やすくするために改行を入れているが実際は一行にする必要がある)
このフォーマットに直したものをブラウザのURLの入力欄に入力すると普通にgoogle mapのページから地図データにアクセスできるようになる。その後今度はこの開いたページのソースを見る。
polylines:[{id:”A”,fid:”00046ff0166158444efdd”,name:”~~~~~~”,description:””,
points:”cvjrAetrdR_GlMmCrJGx@FtBZ~DOnJy@CwH{B{AF}Cv@cNrBNhBB`
CWfAwAtAiC|HoD`IOn@Jz@xBdDFn@]`@yJpAyOfAgDhAyOvHiJ`RuRva@y
CdKsAbHm@jJ_@~LmIrW}EfM{HjHuIbJsElNuBxEyFfBwKvBwNX{G\\sMgDs
QkFaDuAwSeOmJaRwM_YyDeNqCeImFwFiIqJ}CqE_ByAyUiIoUs@qHGk[xA
_YdjAwVoFm@Xu@|D^t@bBD~AICq@oK}BcFsBQr@{ALuA]{@}@S_AiGuAe
F{@aPmBYzMG`MOhC`@NCj@i@?]]a]lC?dM_KaBq[aGsHrHuCeD”,levels:”B
?@???@?@??@??@???@???@?@?@?@???@?@?@?A???@??@@???@
??@?@A?@@@??@??@?????????@????@??@@?@@B”,numLevels:4,zoomFactor:16,weight:5,color:”#ff0000″,opacity:0.65100002,snippet:””}
ソース内をpolylineで検索すると上記のような記述が出て来る。points以降の乱数のようなコードが経路のデータになっているが、データ量の圧縮のためにそのままではエンコードされている状態になっているので google map polyline decodeでぐぐって出て来るページでdecodeをかける。例えばこのページ、
そうすると、緯度、経度の経路情報ががつーんと出て来ます。これで作成の面倒な経路情報を抜く事ができます。しかし、とりあえず今回は経路情報を自作する方向で。