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

Googleマップで探すグルメサイトを作ろう！

2009年02月17日 08時00分更新

古籏一浩、ASCII.jp

ツイートする

■完成したHTMLファイル

★：の部分は取得したGoogle Maps APIキーを入れてください。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="手入力でござる">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=★" type="text/javascript"></script>
<script type="text/javascript" src="js/gmap.js"></script>
<title>東京食べ歩きガイド</title>
</head>
<body>
<div id="content">
<h1>東京食べ歩きガイド</h1>
<div id="menu">
<a href="youshoku/index.html" id="menu1">[洋食]</a>
<a href="washoku/index.html" id="menu2">[和食]</a>
<a href="chuka/index.html" id="menu3">[中華]</a>
<a href="sweets/index.html" id="menu4">[スイーツ]</a>
</div>
<div id="whatsnew">
<h4>最新記事</h4>
<ul id="newslist">
<li>新宿／岐阜屋の情報を追加しました (09/01/30)</li>
</ul>
</div>
<table border="0" cellpadding="0" cellspacing="0" id="map-table">
<tr><td><h2>■地図で探す</h2></td><td><h2>■写真で探す</h2></td></tr>
<tr><td valign="top">
<div id="gmap" style="width:450px;height:480px"></div>
</td>
<td valign="top">
<div id="sidemenu">
<img src="photo/shop1.jpg" width="120" height="80" alt="メリメロ"><br>
<img src="photo/shop2.jpg" width="120" height="80" alt="ハーブス"><br>
<img src="photo/shop3.jpg" width="120" height="80" alt="ザッツ・バーガー"><br>
<img src="photo/shop4.jpg" width="120" height="80" alt="ZOZOI"><br>
<img src="photo/shop5.jpg" width="120" height="80" alt="すた丼"><br>
<img src="photo/shop6.jpg" width="120" height="80" alt="ウナギ"><br>
<img src="photo/shop7.jpg" width="120" height="80" alt="喜久屋"><br>
<img src="photo/shop8.jpg" width="120" height="80" alt="イシワタ"><br>
</div>
</td></tr>
</table>
<div id="footer">
<div id="copyright"><img src="../shared/images/copyright.gif" width="170" height="7" alt="COPYRIGHT 2009 TOKYO TABEARUKI GUIDE"></div>
<a href="#" id="about">ABOUT</a>
<a href="#" id="contact">CONTACT</a>
</div>
</div>
</body>
</html>

■完成したgmap.jsファイル


$(function(){
var map = new GMap2(document.getElementById("gmap"));
map.setCenter(new GLatLng(35.68025451221414,139.68507034873962), 16);
map.addControl(new GLargeMapControl());
var kml = new GGeoXml("http://www.openspc2.org/KML/asc/data.kml?time="+(new Date()).getTime());
map.addOverlay(kml);
});