Google Maps API で GPolylineクラスを使う

先日の「Google Maps API」というエントリでは、マーカーで遊んだだけだったが、今日は、折線を使ってみた。


Flandのページに置かれている日本世界地名データ・緯度経度データのなかにある、全国の鉄道路線図に関するデータをGoogleMapsの上に重畳表示してみた。
全国鉄道路線図 On Google Maps
このページを開くと、上に2つのコンボボックスがある。
まず、左側のコンボボックスから鉄道会社を選択する。
次に、右側のコンボボックスから、路線名を選択する。
すると、その路線データから路線が青の折線で、駅がマーカーで表示される。
「発車!」というチェックボックスにチェックを入れると、「適度の縮尺の地図が表示されている場合に限り」線路に沿ってスクロールしていく。
速度の計算がいい加減(というか固定)なので、暴走列車になることがたまにある。
ただそれだけ。
Flandのページに置かれている日本世界地名データ・緯度経度データをほぼそのまま使用しているので、データの内容はかなり適当である。駅名がちゃんと表示されなかったり、正しくない路線が表示されたりする。まぁ細かいことは言わないで、あぁ動いてるのねって程度で見て欲しい。
一応、FireFoxとIEで動作確認をしてある。
サーバーのスクリプトとクライアントのソースコードはまとめて、こちらに置いてある
さて、
実は、このプログラム、当初、FireFoxで動かすのは簡単にできたのだが、IEではうまく動かなかった。
おそらく同様の件で、呆然としている人が他にもいると思われるので、ここにその内容を記述する。(俺だけじゃないはず。え?俺だけ?)

状況
Google Maps APIの、GPolylineクラスで折線を描画しようとすると、Internet Expoler (IE)で、
ライン:300
文字:769
エラー:予期しないメソッドの呼び出し、またはプロパティ アクセスです。
コード:0
というエラーが出る。

最初、何が原因なのか、じぇんじぇんわからんかったんですよ。挙句の果てにはGoogle Maps APIのバグちゃうか?って疑ったりして。
んで、結局Google先生に問い合わせたところ、
Topic in Google-Maps-APIというgoogle内の掲示板?にGPolyline & IE6という記事を発見。
まさに同様の症状。解決のための提案を見ると、、、

For why your line isn’t showing up on IE, see
http://www.google.com/apis/map s/documentation/#XHTML_and_VML

え?
要するに、
HTMLファイルの頭に、

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<style type=”text/css”>
v:* {
behavior:url(#default#VML);
}
</style>

(不等号は全角に変えてあります。)をちゃんと入れろよと。
VMLのネームスペースをちゃんと使えるようにしておけよと。
すみません。俺がドキュメント読んで無かっただけです。
速度のコントロールをして、人工衛星電車でGO?
いまいち面白くないなぁ。。。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください