福島県内所蔵図書館マップ −その4− UPしました

ようやく見せれる程度には出来たのでUP

http://natu.blue.coocan.jp/Fukushima_map.htm
参考『涼宮ハルヒの憂鬱』をもってる図書館』

使い方

入力フォームにISBN(10桁、13桁どちらでも可)を入力しボタンを押下

  • 右側に書名、書像、著者、出版者などが表示され*1、Map上に各館での所蔵状況が次々にマーカで表示されます(緑色が所蔵あり、赤色が所蔵なし)

※画面下部に今日、明日、明後日の会津(若松)、中通り(福島)、浜通り小名浜)の天気予報を表示しています。

  • 左上の福島市/郡山市タブをクリックすると、それぞれの市立図書館の分館レベルでの所蔵状況が分かります

  • 緑色のマーカを右クリックで、詳細情報が表示されます*2

謝辞

id:myrmecoleonさんのhttp://myrmecoleon.sytes.net/map/が大変参考になりました。いつもどうもです

今後

ほめられると伸びるタイプなので、コメントを頂けると機能が増えたり(減ったり)、東北地方の他県版とかも出来たり出来なかったりします。*3

雑感

今回Table要素を使わない、innerHTMLを使わないという縛りにこだわってみた。
書像の脇に著者等を並べるのに、最初cssでfloat: left;と記述して、それ以降も回り込んでしまい大変苦しんだ。
結局、親要素(書像)にposition:relative;子要素(著者など)position: absolute;top:0;でうまくいった、また一つ学習
それにしてもGMarkerManagerからマーカを削除したり、更新したりって機能がなぜないのだろう
ISBNを入力するたびにmapをloadするのもなんなので

mgr = new GMarkerManager(map);
map.clearOverlays();
mgr.refresh();

でマーカを消しているけど、正解なのかなぁ?
あと、更新が出来ると検索中の館のマーカをアニメgifにして?をグルグルまわして検索しているように見せたり出来るのになぁ

*1:Amazonの詳細ページへのアフィリエイト付きのリンクになっています

*2:IEエンジンのブラウザを使用している方は、一部文字化けする館がありますが、エンコードの指定を自動(日本語)に再度指定することで正常に表示されます

*3:今回の喜多方市立図書館とか、ISBN検索なのにユニークにならない館とか技術的に不可能な場合もありますが