29分でできる！ あのサイトの“技”を盗め ― 第25回
Googleマップ＋jQueryで作るAjaxなデザイン
2009年05月26日 11時55分更新
■完成したHTMLファイル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>TOKYOブックマニア ｜ ブックストア</title>
<link rel="stylesheet" href="css/lavalamp.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<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>
</head>
<body>
<div id="book_header">
<div>本屋巡りが趣味の管理人による独断と偏見の書評サイト</div>
<h1>TOKYOブックマニア</h1>
<img src="images/site/mark.gif" width="52" height="63" alt="">
</div>
<!-- グローバルナビゲーション -->
<ul class="lavaLampWithImage">
<li><a href="#">トップ</a></li>
<li><a href="#">ブックレビュー</a></li>
<li><a href="#" class="currentPos">ブックストア</a></li>
<li><a href="#">ブック＆シネマ</a></li>
</ul>
<!-- 書店地図 -->
<div id="shop_contents">
<div id="bookMap">
<div id="shopInfo">書店情報</div>
<div id="gmap" style="width:350px;height:350px;"></div>
<div id="shopThumb">
<img src="images/shop/thumb/1.jpg" class="shopmap" longdesc="1.html,35.647613,139.714239">
<img src="images/shop/thumb/2.jpg" class="shopmap" longdesc="2.html,35.664179,139.693221">
<img src="images/shop/thumb/3.jpg" class="shopmap" longdesc="3.html,35.691417,139.696913">
<img src="images/shop/thumb/4.jpg" class="shopmap" longdesc="4.html,35.665255,139.713869">
<img src="images/shop/thumb/5.jpg" class="shopmap" longdesc="5.html,35.706423,139.651261">
</div>
<br style="clear:both;">
</div>
</div>
<div id="wrapper">
<div id="book_contents">
<div id="bookmain">
<div class="contents">
<!-- Booklist Table -->
<table id="booklist">
<thead>
<tr><th>写真</th><th>書店名</th><th>ジャンル</th><th>最寄駅</th><th>住所</th></tr>
</thead>
<tbody>
<tr><th width="72"><img src="images/shop/thumb/1b.jpg" width="72" height="36" alt="NADiff A/P/A/R/T"></th>
<td>NADiff A/P/A/R/T</td>
<td>アート/デザイン</td>
<td>恵比寿</td>
<td>渋谷区恵比寿1-18-4</td></tr>
<tr><th><img src="images/shop/thumb/2b.jpg" width="72" height="36" alt="SHIBUYA BOOKSELLERS"></th>
<td>SHIBUYA BOOKSELLERS</td>
<td>アート/デザイン</td>
<td>渋谷/代々木八幡</td>
<td>渋谷区神山町17-3 </td></tr>
<tr><th><img src="images/shop/thumb/3b.jpg" width="72" height="36" alt="ブックファースト新宿店"></th>
<td>ブックファースト新宿店</td>
<td>総合</td>
<td>新宿</td>
<td>新宿区西新宿1-7-3</td></tr>
<tr><th><img src="images/shop/thumb/4b.jpg" width="72" height="36" alt="COW BOOKS 南青山"></th>
<td>COW BOOKS 南青山</td>
<td>ライフスタイル</td>
<td>表参道</td>
<td>港区南青山3-13-14-2F</td></tr>
<tr><th><img src="images/shop/thumb/5b.jpg" width="72" height="36" alt="高円寺文庫センター"></th>
<td>高円寺文庫センター</td>
<td>サブカル</td>
<td>高円寺</td>
<td>杉並区高円寺北2-10-5</td></tr>
<tr><th><img src="images/shop/thumb/6b.jpg" width="72" height="36" alt="BOOK246"></th>
<td>BOOK246</td>
<td>ライフスタイル</td>
<td>青山1丁目</td>
<td>港区南青山1-2-6 Lattice 青山</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="book_navi_1">
<div id="booknavileft">
<h3>最近追加した本屋さん</h3>
<ul>
<li><a href="#">BOOK246</a></li>
<li><a href="#">ブックファースト新宿店</a></li>
<li><a href="#">青山ブックセンター六本木店</a></li>
<li><a href="#">ちえの木の実</a></li>
<li><a href="#">古書ビビビ</a></li>
<li><a href="#">BOOKSルーエ</a></li>
</ul>
<h3>懐かしの本屋さん</h3>
<ul>
<li><a href="#">新栄堂書店池袋本店</a></li>
<li><a href="#">芳林堂書店池袋店</a></li>
<li><a href="#">大盛堂書店本店</a></li>
</ul>
</div>
</div>
<div id="book_navi_2">
<div id="booknaviright">
<h3>行ってきましたfrom blog</h3>
<ul>
<li>できたての「ジュンク堂那覇店」に行ってみました<br>(09-05-01)</li>
<li>安楽亭の本屋さん。さいたま新都心の「ブックデポ書楽」へ<br>(09-04-25)</li>
<li>長野と言えば「平安堂」<br>(09-03-20)</li>
</ul>
</div>
</div>
</div>
<div id="book_footer">
<p>
©Copyright 2009 TOKYO BOOK REVIEW
</p>
</div>
</body>
</html>
■完成したbooklist.jsファイル
$(function(){
// ナビゲーション
$(".lavaLampWithImage").lavaLamp({
fx: "backout",
speed: 700
});
// マップ処理
var map = new GMap2(document.getElementById("gmap"));
map.setCenter(new GLatLng(35.647613, 139.714239), 15);
map.addControl(new GSmallMapControl());
// デフォルトの書店データを読み込み表示
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));
// サムネールオーバー＆書店情報表示処理
$(".shopmap").mouseover(function(){
var shopdata = ($(this).attr("longdesc")).split(",");
$("#shopInfo").load(shopdata[0]);
var pos = new GLatLng(parseFloat(shopdata[1]),parseFloat(shopdata[2]));
map.panTo(pos, 15);
if($(this).attr("flag")) return; // すでにマーカーがある場合は処理しない
map.addOverlay(new GMarker(pos));
$(this).attr("flag", true);
});
})
この連載の記事
- 第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アニメ＆エフェクト合わせ技で画像を拡大
- この連載の一覧へ
