デフォルトの地図の表示とスクリプトの組み込み
最後の仕上げに入りましょう。ここまでに作成したスクリプトでは、ページが読み込まれた時点で書店の情報がまったく表示されていません。そこで、デフォルトでは最初の書店情報を読み込んで表示するように改良します。処理内容はマウスオーバー時の処理とほとんど同じですが、 $(".shopmap:first") としてクラス名「shopmap」の最初に出現した書店情報を指定します。ちなみに、$(".shopmap:last") とすると最後の書店情報が表示されます。
// デフォルトの書店データを読み込み表示
var firstData = $(".shopmap:first").attr("longdesc").split(",");
$("#shopInfo").load(firstData[0]);
var pos = new GLatLng(parseFloat(firstData[1]),parseFloat(firstData[2]));
map.addOverlay(new GMarker(pos));
最後に、ここまでのスクリプトを「booklist.js」ファイルに追加して保存します。あとは、いつものように順番にライブラリファイルを読み込ませれば完成です。
<script src="http://maps.google.com/maps?file=api&v=2&key=★★★" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/booklist.js"></script>
★★★:取得したAPIキーを入れてください
![]() | ![]() | |
|---|---|---|
![]() | 完成した作例。マウスオーバーで地図がスクロールし、コンテンツ部分が書き換わります | |
今回のサンプルにちょっと手を入れれば、アイデア次第で地図を使ったユニークなサイトが作れると思います。試してみましょう。次回は、このページをさらに改良しますので、お楽しみに。
(作例デザイン:wataru)
■もっと勉強したい人のためのオススメBOOK(Amazon.co.jp)
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo!の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド!ページ切換法
- 第16回 jQueryアニメ&エフェクト合わせ技で画像を拡大
- この連載の一覧へ

















![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM] Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif)




