GMap上に経路表示＋パーマリンク
Google Maps APIのGPolylineを使うと、地図上に自由に線が書ける。というのは、前にも書きました。まあ、それを使うと、地図上をクリックすると自由に線が引けて、自分が歩いた道やサイクリングコースなんかをマークできるようなページは簡単に作れます。けど、実際に地図に線を引いてみてもPrintScreenキーでも押さない限り、描いた線は保存できないし、誰かに見せてあげることもできないのでいまいち面白くありません。
なので、クリックで地図上に作成した線に対してパーマリンクが与えるページのサンプルを作ってみました。
GMap上に経路表示＋パーマリンク
IE6.0, Firefox1.5, Opera8.5で確認。
上のページでは、クリックすることにより地図上に線を引くことができるのできます。そして、線を引くごとに地図の下のパーマリンク欄が更新され、そこに表示されるURLにアクセスすれば、同じ線が引かれた地図にアクセスできるというわけです。
パーマリンクがあるので、
- メールやインスタントメッセージで道順付きの地図を送れる。
- ソーシャルブックマークなどで共有することができる。
- テキストファイルなどにメモっておくことができる。後から修正もできる。
のようなメリットがあります。
ただし、URL上のGETパラメータに経路の座標情報をくっつけているだけなので、実際には、ちょっと経路の点の数を増やすとすぐにURLがやたらと長くなってしまい*1、以下のような問題にぶち当たります。
- すぐに一般的なメーラーでは折り返し表示される長さになってしまう。
URLがはてなブックマークの長さ制限に引っかかって、途中で切られてしまう。- そもそもGETパラメータの長さには上限があったはずだ。（何文字だっけ？）
なので、こうゆうのははてなマップとかでちゃんとサーバーサイドに情報を保存するようにしてやったほうがいいよなと思いました。で、ダイアリーから記法で参照できるようにしておくと。
ちなみに、右上の図は2006年の東京国際マラソンの折り返し地点までのコースです。公式ページのPDFをみて作りました。
Google Maps API ver 2
上のやつはせっかくだから、新しいバージョンのGoogle Maps APIを使ってみました。というか、最初は旧バージョンで書いてたけど、完成後に新しいバージョンを使うように一部書き換えました。
なので、旧バージョンとの違いについて超簡単にまとめ。
ver 2のAPIをロードする
scriptタグのURLの"v=1"を"v=2"にする。
GPointがGLatLngに置き換えられた
API Ver2では、座標に関する情報は全部GLatLngクラスのインスタスが使われる。GPointを使ってる、想定している箇所は修正が必要。GPointのコンストラクタは、GPoint(x, y)だが、GLatLngのコンストラクタは、GLatLng(lat, lng)*1で、引数の順が異なるのに注意。
GMap2クラスが追加された
GMap2クラスはGMapとインタフェース互換性がなく、いくつかのメソッド名が異なっている。また、ズームレベルの大小が逆転しているなどの違いもある。GMapクラスを使い続けることも（少なくとも今のところは）できるようだ。
GOverviewMapControlの追加
新しく追加されたコントロールオブジェクトであるGOverviewMapControlを使うと、バージョンアップしたGoogle Mapsで使われている小窓を追加できる。ただし、公式ドキュメントに記述が少なく、使い方が不明な部分が多い。また普通にすると、小窓が変なところに貼り付けられてしまうが、以下のようにすればGoogle Mapsのように地図の右下に重ねて表示させることができるようです（参考）。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GOverviewMapControl());
var overview = document.getElementById("map_overview");
document.getElementById("map").appendChild(overview); 触って気づいた部分についてしか書いてないので、他にも変更点はあると思います。
とりあえずhttp://www.google.com/apis/maps/documentation/#The_GMap_class_overviewのNew!が付いているところは要注意。
