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

Googleマップ＋jQueryで作るAjaxなデザイン

2009年05月26日 11時55分更新

文● 古籏一浩、ASCII.jp

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

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