Ajaxでホームページをつくろう













■YAHOO MAPで遊びます



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="./js/style.css" type="text/css" rel="stylesheet">
<script src="./js/prototype.js" type="text/javascript"></script>
<script src="./js/src/scriptaculous.js" type="text/javascript"></script>
<script src="./js/src/unittest.js" type="text/javascript"></script>
<script src="./js/tm.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.4&appid=railwalkerjp"></script>
<script type="text/javascript">

var map

// YLog.initSize(new YSize(600,500));
window.onload=function(){

map = new YMap(document.getElementById("map"));
var myPoint = new YGeoPoint(49.291870145063516,-123.13182458281517);
map.drawZoomAndCenter(myPoint, 6);
map.addZoomLong();


var GeoPoint = new Array();
var desc = new Array();


//マーキングの位置を指定します。配列にしていますので、すきなだけ追加できます。
GeoPoint[0] = new YGeoPoint('49.273922674702256','-123.09795565903187');
GeoPoint[1] = new YGeoPoint('49.283759916074594','-123.14233113080263');
GeoPoint[2] = new YGeoPoint('49.28868796973661','-123.12214247882366');

//GeoPoint[0] = new YGeoPoint('',''); //


var coment = new Array();

//マーキングにタイトル、写真、コメントを追加します。
coment[0] = new Array("タイトル1", "コメント1", "pic1","1");
coment[1] = new Array("タイトル2", "コメント2", "pic2","1");
coment[2] = new Array("タイトル3", "コメント3", "pic3","1");

// coment[19] = new Array("", "", "","");

for (var i = 1; i <= coment.length ; i++) {

desc[i-1] = "<table border=0 width=220 style=\"margin:3;\"><tr><td><font size=1 color=\"#000000\">【"+coment[i-1][0]+"】</font></td></tr><tr><td><img src=./pic/"+coment[i-1][2]+".jpg width=210 height=150></td></tr><tr><td><font size=1 color=\"#000000\">"+coment[i-1][1]+"</font></td></tr></table>";
}

var flg = looping(GeoPoint,desc);

}

</script>
</head>
<body>

<div style="position:absolute;"><div id="map" style="height:400px; width:700;position:;"></div></div>
</body>
</html>


こちらから実行できます。




       
mail:info @ a-jax.net