■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> こちらから実行できます。 |