Data List

  • Loading XML file, or JavaScript is disabled.

About

スクリプト名を考えるのは面倒なので、サービス名をそのまんま流用して“Google Maps API + flickr = Nice Photo Map :-)”になっています。 :-) も、もちろんスクリプト名に含まれます(ぇ)。

殆ど Google Maps API(以下 GMA と略します)を使っています。 data.xml という静的な XML ファイルを、GMA で提供されている AJAX を用いて読み込み、GMA を用いて地図上にマッピングしています。 吹き出しウィンドウ(GMarker.openInfoWindowHtml() を用いている)で flickr より写真のサムネイルを取得し、リンク先を XML ファイルに書いてある URL の写真へ向けておきます。 flickr では、写真のサイズをファイル名の 109636820_be6b3a95b4_o.jpg の位置で区別しているので、JavaScript の String.replace() 関数を用いて容易にサムネイル URI を取得できます。

なお他の類似するサービスとして はてなマップ がありました。 やっぱはてなの方が上ですね :-)

How to use?

上の Data List に表示されている一覧から、任意の項目をクリックして下さい。 自動的に地図が移動し、ピンク色に丸印のピンが表示されます。 そのピンをクリックすると吹き出しが表示され、その中に写真が表示されます。 更にその写真をクリックすることで、大きな写真(解像度: 800x450)を見ることが出来ます。

To Do

  • [2006-03-14] Firefox 1.5.0.1 にて吹き出しを表示したままドラッグすると、写真が地図より溢れて表示されるてしまう。普通の吹き出しと同様に id="map" 内へ隠れるようにしたい。
    • [2006-03-14] Firefox Forms in openInfoWindowHtml > thetrueaplus@gmail.com に依れば、新しいバージョンでは直っているらしい。が、時間がないので後日。……ところが、勘違いだったらしい。
    • [2006-03-15] “原点に戻ろう”と思い、GMarker.openInfoWindowHtml() に表示する div タグから style 要素を削除すると上手く表示される。ということで一番怪しいと思った overflow プロパティを削除したら正常に動作。Firefox のバグなのかな。というわけで解決。
  • [2006-03-14] “直前の検索結果に戻る”ボタンを使用すると初期位置へ戻ってしまう(仕様?)ので、最後に利用した位置へ戻すようにする。
    • [2006-03-14] Google-Maps-API Group を見ていたら、return to last result? how to set state? というスレッドを発見。これに依れば移動した後に Maps.saveMapState() を呼べば“直前の検索結果に戻る”ボタンを使用しても、移動しないとのこと。というわけで実装・解決。
    • [2006-03-15] Maps.clearOverlays() でも位置を保存するので、Maps.saveMapState() の代わりに Maps.clearOverlays() の位置を変えてみた。
  • [2006-03-15] flickr の set を指定するとその写真一覧からそれぞれの URI を取得し、Google Maps へ容易にマッピング出来るモノを作る。
    • [2006-03-16] Ajax では同一ドメイン以外の URI へクエリを送信できないのでリダイレクトスクリプトを組んだ。たぶん XSS の脆弱性ありますけど、なにか?
  • [2006-03-17] Firefox でズームレベルのスライダーが表示されない。なぜ?
    • [2006-03-19] キャッシュ関係のバグ? 時々、他サイトの、関係のない画像が地図として表示される。今はスライダーが正常に表示されている。

Related Links