29分でできる！ あのサイトの“技”を盗め ― 第25回

Googleマップ＋jQueryで作るAjaxなデザイン (4/5)

デフォルトの地図の表示とスクリプトの組み込み

　最後の仕上げに入りましょう。ここまでに作成したスクリプトでは、ページが読み込まれた時点で書店の情報がまったく表示されていません。そこで、デフォルトでは最初の書店情報を読み込んで表示するように改良します。処理内容はマウスオーバー時の処理とほとんど同じですが、 $(".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&amp;v=2&amp;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）

• jQueryで作る Ajaxアプリケーション

• jQueryプログラミング入門―Ajaxにも使えるJavaScriptライブラリ

• jQuery+JavaScript実践リファレンス―Webデザインを強化するための

• 実践!Ajaxフレームワーク jQuery