鬼のいぬ間にAPI

連休前だけあって職場は全然人がいなかった。上司も休みだし喫緊の用も無いので、今日は一日好きなことをさせてもらうことに。
うちの部署のホームページに案内図を載せたいんだけど、百ヶ所以上あるのをどうやったら上手く表示できるかを考えておいてと頼まれていたのでした。
 
方法はいろいろ考えられる。例えば、

  • 地図をスキャナで取り込む
  • 自分で地図を書く
  • GoogleMapへのリンクを張る
  • GoogleMapのマイマップを使う
  • Mapfanの商用サービスを利用する

などなど。
 
GoogleMapへのリンクを張るのは経験があるんだけど、吹き出しをつけるのが結構めんどくさかった記憶があるのでパス。そこで今回はGoogleMap APIに挑戦することにした。
でも、よく考えたらJavascriptなんて一度も触ったことない・・・。二時間ぐらい格闘してどうにかできあがったのがこんなの。
 

http://wwwa.ncv.ne.jp/~roadster/test.htm
 
サンプルとして道内にあるジャスコの店舗を表示できるようにしてみた。<店舗案内>のリンクから実際に試してみることができる。
テキストボックスに入れた住所から地図を表示させるサンプルはよくあるんだけど、プルダウンメニューから選択した場所の住所をテキストボックスに移すのに苦労した。
 
課題は、リストボックスの中の変数を配列にして複数のデータを持たせて吹き出しの中に反映させることと、住所検索だと表示させたい場所とずれることがあるので、その解決か。
連休中はどこにも行く予定が無いので、いい機会だからJavascriptの勉強をしてみようかな、と考えている。