��Ajax : Google Maps��\������

�@Ajax (Asynchronous JavaScript+XML)���g�����L���Ȃ��̂Ƃ���Google Maps������܂��B�����ł�Google Maps�Ŏg���Ă���Z�p�̈ꕔ���T���v�����쐬���Ď��ۂɓ������Ă݂܂��B

�����F���݂̓T�[�o�[����f�[�^�����������̂��̂ƈقȂ邽�ߓ��삵�Ȃ��T���v��������܂��B�������Â����̂ɂȂ��Ă��܂��B�Q�l�܂łɂƂ������Ƃł��肢���܂��B����Google Maps�͓o�^�����API�𗘗p���ĕ\����������A���낢��Ȃ��Ƃ��ł���悤�ɂȂ��Ă��܂��B�i2005�N11��17���ߌ�4��11�������j


�@�܂��A�ŏ���Google Maps��\�����Ă݂܂��傤�B���ۂ̃X�N���v�g�͈ȉ��̂悤�ɂȂ�܂��B

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^��\������</title>
</head>
<body>
<script type="text/javascript"><!--
for (y=1600; y<1603; y++)
{
for (x=3616; x<3620; x++)
{
document.write('<img src="http://mt2.google.com/mt?v=w2.6&x='+x+'&y='+y+'&zoom=5">');
}
document.write("<br>");
}
// --></script>
</body>
</html>

�@Google Maps���\�����Ă���摜��URL��http://mt2.google.com/mt?v=w2.6&x=3620&y=1600&zoom=5�̂悤�ɂȂ�܂��B�ȉ���URL�𒼐ڃu���E�U�ɓ��͂��Ă݂Ă��������B

http://mt2.google.com/mt?v=w2.6&x=3620&y=1600&zoom=5

�@���H������摜���\�����ꂽ�͂��ł��B������x=3620��x=3621�ɂ��ĉ摜��\�����Ă݂Ă��������B�����قǂ̉摜�̉E���̒n�_�̉摜���\�����ꂽ�͂��ł��B���l��y=1601�Ƃ���Ɖ��̉摜���\������܂��Bzoom=2�Ƃ���ƁA���ڍׂȒn�}�ɂȂ�܂��i�T���v�������s�F�g��\�������B0�`5�܂ł̒l���w��ł���j�BGoogle Maps�̉摜�u���b�N��128�s�N�Z���~128�s�N�Z���̃T�C�Y�ɂȂ��Ă��܂��B
�@���̃T���v���ł͈�x�\�������n�}��ύX�ł���悤�ɂȂ��Ă��܂���BGoogle Maps�ł͒n�}���ړ��������肷�邱�Ƃ��ł��܂��B�����ŁA���x�͉摜�����ւ��Ĉړ����Ă���悤�Ɍ�����悤�ɂ��܂��B���ꂪ�ȉ��̃T���v���ɂȂ�܂��B

�y�T���v�������s�z
<html>
<head>
<title>Google Maps�̃f�[�^��\������</title>
<script type="text/javascript"><!--
function viewMap(fObj)
{
sx = parseInt(fObj.gx.value);
sy = parseInt(fObj.gy.value);
for (y=0; y<3; y++)
{
for (x=0; x<3; x++)
{
imgURL = "http://mt2.google.com/mt?v=w2.6&x="+(sx+x)+"&y="+(sy+y)+"&zoom=5";
document.images["map"+x+y].src = imgURL;
}
}
}
// --></script>
</head>
<body>
<script type="text/javascript"><!--
serial = 0;
for (y=0; y<3; y++)
{
for (x=0; x<3; x++)
{
document.write('<img src="trans.gif" width="256" height="256" name="map'+x+y+'">');
}
document.write("<br>");
}
// --></script>
<form>
X:<input type="text" name="gx" value="3620"><br>
Y:<input type="text" name="gy" value="1600"><br>
<input type="button" value="�n�}�\��" onClick="viewMap(this.form)">
</form>
</body>
</html>

�@�܂��A������GIF�摜��9���̉摜�ɐݒ肵�܂��B9�Ƃ����͉̂�3���A�c3���Ƀ^�C����ɉ摜���z�u����Ă���̂ŁA���̐��ɂȂ�܂��B�t�H�[���̃e�L�X�g�t�B�[���h�ɓ��͂��ꂽ���W�l����\������摜��URL�����߂܂��B����URL���摜��src�v���p�e�B�ɓ���܂��B�����4�����J��Ԃ����ƂŒn�}��\���ł��܂��B���̍�Ƃ���葬���s���Βn�}���X�N���[���i�ړ��j�������肷�邱�Ƃ��ł��܂��B
�@Google Maps�̓{�^�����N���b�N���邱�ƂŒn�}���ړ������邱�Ƃ��ł��܂��B���Ȃ�X���[�Y�ɒn�}���X�N���[�����܂��B�Ƃ肠�����A�{�^�����N���b�N������n�}���u���b�N�P�ʂňړ�����悤�ɂ��܂��B���ꂪ�ȉ��̃T���v���ł��B

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^��\������</title>
<script type="text/javascript"><!--
sx = 3620;
sy = 1600;
function viewMap()
{
for (y=0; y<3; y++)
{
for (x=0; x<3; x++)
{
imgURL = "http://mt2.google.com/mt?v=w2.6&x="+(sx+x)+"&y="+(sy+y)+"&zoom=5";
document.images["map"+x+y].src = imgURL;
}
}
}
// --></script>
</head>
<body>
<script type="text/javascript"><!--
for (y=0; y<3; y++)
{
for (x=0; x<3; x++)
{
document.write('<img src="trans.gif" width="256" height="256" name="map'+x+y+'">');
}
document.write("<br>");
}
// --></script>
<form>
�@<input type="button" value="��" onClick="sy--;viewMap()"><br>
<input type="button" value="��" onClick="sx--;viewMap()">
<input type="button" value="�E" onClick="sx++;viewMap()"><br>
�@<input type="button" value="��" onClick="sy++;viewMap()">
</form>
</body>
</html>

�@���ۂ�Google Maps�ł͂��������u���b�N�𑽂����Ă��܂��B����̓X�N���[�������ꍇ�ɗ]�v�ȃu���b�N�����݂��Ȃ��ƃ}�b�v���؂�Ă��܂����߂ł��B
�@���Ƀ}�b�v�S�̂��X���[�Y�ɃX�N���[�������Ă݂܂��傤�B�}�b�v�S�̂��X�N���[�������邽�߂�<div>�^�O�Œn�}�摜���͂݁A<div>�̕\�����W���X�^�C���V�[�g�Ŏw�肵�܂��B�{�^�����N���b�N���ꂽ��}�b�v�S�̂��ړ������܂��B�ߋ��ɂ�while()���g���ăX�N���[����������@������܂������A�����ł͈��S�̂��߃^�C�}�[�isetTimeout()�j���g���Ēn�}�̕\�����W�����炵�Ă����܂��B�w�肳�ꂽ���W�܂ňړ�������X�N���[�������𒆎~���܂��B

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^��\������</title>
<script type="text/javascript"><!--
sx = 3620;
sy = 1600;
mx = 0;
my = 0;
dx = 0;
dy = 0;
mapSize = 256;
oldX = oldY = newX = newY = 0;
function moveMap(dxx,dyy)
{
dx = dxx;
dy = dyy;
oldX = mx * mapSize;
oldY = my * mapSize;
mx = mx + dx;
my = my + dy;
newX = mx * mapSize;
newY = my * mapSize;
setTimeout("scrollMap()",10);
}
function scrollMap()
{
document.getElementById("mapData").style.left = oldX;
document.getElementById("mapData").style.top = oldY;
if ((oldX == newX) && (oldY == newY)) return;
oldX = oldX + dx*2;
oldY = oldY + dy*2;
setTimeout("scrollMap()",10);
}
// --></script>
</head>
<body>
<div id="mapData" style="position:absolute;top:0px;left:0px;">
<script type="text/javascript"><!--
for (y=0; y<3; y++)
{
for (x=0; x<3; x++)
{
document.write('<img src="http://mt2.google.com/mt?v=w2.6&x='+(sx+x)+'&y='+(sy+y)+'&zoom=5">');
}
document.write("<br>");
}
// --></script>
</div>
<form style="position:absolute;top:650px;left:10px">
?@<input type="button" value="��" onClick="moveMap(0,-1)"><br>
<input type="button" value="��" onClick="moveMap(-1,0)">
<input type="button" value="�E" onClick="moveMap(1,0)"><br>
��<input type="button" value="?��" onClick="moveMap(0,1)">
</form>
</body>
</html>

�@���ɃX�N���[�������ۂɒn�}�摜��ǂݍ��݉��X�ƕ\������悤�ɂ��Ă݂܂��B��قǂ̃v���O�����ŗ]�v�ȕ������폜���P���ɏォ�牺�ɃX�N���[�������邾���̂��̂ɂ��܂��B

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^��\������</title>
<script type="text/javascript"><!--
sx = 3620;
sy = 1600;
mapSize = 256;
dy = 1;
mapY = 0;
function viewMap()
{
for (y=0; y<3; y++)
{
for (x=0; x<3; x++)
{
imgURL = "http://mt2.google.com/mt?v=w2.6&x="+(sx+x)+"&y="+(sy+y)+"&zoom=5";
document.images["map"+x+y].src = imgURL;
}
}
}
//�@�}�b�v�̉��̉摜��\��
function drawMapDataX()
{
for (x=0; x<3; x++)
{
imgURL = "http://mt2.google.com/mt?v=w2.6&x="+(sx+x)+"&y="+sy+"&zoom=5";
document.images["map"+x+"0"].src = imgURL;
}
}
function scrollMap()
{
mapY = mapY + dy;
if (mapY > mapSize)
{
mapY = 0;
sy = sy - 1;
viewMap();
}
document.getElementById("mapData").style.top = mapY;
setTimeout("scrollMap()",10);
}
// --></script>
</head>
<body onLoad="scrollMap()">
<div id="mapData" style="position:absolute;top:0px;left:0px;">
<script type="text/javascript"><!--
for (y=0; y<3; y++)
{
for (x=0; x<3; x++)
{
document.write('<img src="trans.gif" width="256" height="256" name="map'+x+y+'">');
}
document.write("<br>");
}
viewMap();
// --></script>
</div>
</body>
</html>

�@���X�ƃ��[�v�\��������֐���scrollMap()�ł��B�}�b�v�T�C�Y����<div>�^�O�̍��W�l���傫���Ȃ�����0�ɖ߂��܂��B����Ń}�b�v�S�̂���ԏ�Ɉړ����܂��B���̎��Ƀ}�b�v�u���b�N�̕\�����P�‚��炵�}�b�v�S�̂��ĕ`�悵�܂��B������x�̓s���œǂݍ��݂��Ԃɍ���Ȃ��ꍇ������܂��B���̏ꍇ��setTimeout()�̒l��傫�����Ă��������B1000�Ƃ����1�b���ƂɃX�N���[���������s���܂��B
�@��L�T���v���ł̓}�b�v�S�̂���ɖ߂��Ă��܂����ߌ��ꂵ����Ԃł��B���̏����������Ȃ��悤�ɂ���ɂ́A�����<div>�^�O�ň͂݁A����<div>�^�O�ɃX�^�C���V�[�g��clip���w�肵�܂��Bclip�͎w�肵���͈͂̂ݕ\�����s�����̂ł��B���̒l�𒲐߂��ă}�b�v����ɖ߂����̂������Ȃ��悤�ɂ��܂��B���ۂ̃T���v���͈ȉ��̂��̂ɂȂ�܂��B

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^��\������</title>
<script type="text/javascript"><!--
sx = 3620;
sy = 1600;
mapSize = 256;
dy = 1;
mapY = 0;
function viewMap()
{
for (y=0; y<3; y++)
{
for (x=0; x<3; x++)
{
imgURL = "http://mt2.google.com/mt?v=w2.6&x="+(sx+x)+"&y="+(sy+y)+"&zoom=5";
document.images["map"+x+y].src = imgURL;
}
}
}
//�@�}�b�v�̉��̉摜��\��
function drawMapDataX()
{
for (x=0; x<3; x++)
{
imgURL = "http://mt2.google.com/mt?v=w2.6&x="+(sx+x)+"&y="+sy+"&zoom=5";
document.images["map"+x+"0"].src = imgURL;
}
}
function scrollMap()
{
mapY = mapY + dy;
if (mapY > mapSize)
{
mapY = 0;
sy = sy - 1;
viewMap();
}
document.getElementById("mapData").style.top = mapY;
setTimeout("scrollMap()",10);
}
// --></script>
</head>
<body onLoad="scrollMap()">
<div style="position:absolute;top:0px;left:0px;width:640px;clip:rect(256px 1500px 768px 0px);">
<div id="mapData" style="position:absolute;top:0px;left:0px;width:1000px">
<script type="text/javascript"><!--
for (y=0; y<3; y++)
{
for (x=0; x<3; x++)
{
document.write('<img src="trans.gif" width="256" height="256" name="map'+x+y+'">');
}
document.write("<br>");
}
viewMap();
// --></script>
</div>
</div>
</body>
</html>

�@���ۂɂ͈�����ł͂Ȃ����낢��ȕ����Ɉړ����邽�ߏ����͑����ʓ|�ɂȂ�܂��B
�@���Ƀ}�b�v�̏�ɕ\�������ӂ�������s���̏��������Ă݂܂��B�ӂ�������s�����悭����Ɖe���‚��Ă���A�������łӂ����ڂ₯�Ă��܂��B����̓��`�����l���t��PNG�摜�𗘗p���Ă��܂��B���`�����l���Ƃ����͓̂��ߏ��̂��Ƃ�0�`255�i�K�ŕs�����x���w�肷�邱�Ƃ��ł��܂��B����ł͎��ۂ�Google Maps�̏�ɔ������̉e��������PNG�摜��\�����Ă݂܂��傤�B�ȉ��̃T���v����Firefox, Netscape 6�ȍ~, Safari�œ��삵�܂��B

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^+�ӂ�������\������</title>
</head>
<body>
<div id="mapData" style="position:absolute;top:0px;left:0px;z-Index:1;">
<script type="text/javascript"><!--
for (y=1600; y<1604; y++)
{
for (x=3616; x<3620; x++)
{
document.write('<img src="http://mt2.google.com/mt?v=w2.6&x='+x+'&y='+y+'&zoom=5">');
}
document.write("<br>");
}
// --></script>
</div>
<img src="pop.png" style="position:absolute;top:285px;left:210px;z-Index:10;">
</body>
</html>

�@�}�b�v�̏�ɂӂ��������\�����ꔼ�����̉e��Google Maps�̏���Y��ɕ\������Ă���͂��ł��B�i�摜�����܂����Ƃ��ӂ����A������Ɖ������Ƃ��͖������Ă�������f(^^;�j
�@�������AWindows�ł�Internet Explorer (�ȉ�IE) �ł̓��`�����l���t����PNG�摜��\������Ɛ��������f����܂���B�������AGoogle Maps�ł�IE�ł��������̉e��\�����Ă��܂��B����̓t�B���^�@�\(Direct X)��AlphaIMageLoader���g���Ă��܂��B�����IE5.5�ȏ�ŗ��p���邱�Ƃ��ł��܂��B����AlphaImageLoader�̓t�B���^�@�\�Ȃ̂ŃX�^�C���V�[�g�Őݒ肵�܂��B�ڍׂ��}�C�N���\�t�g�Ђ̃y�[�W�ɂ���܂��̂ŁA��������Q�Ƃ��Ă��������i�������ْ͐������R��JavaScript�|�P�b�g���t�@�����X 425�y�[�W�j�B���ۂ̃T���v���͈ȉ��̂悤�ɂȂ�܂��B

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^+�ӂ�������\������</title>
</head>
<body>
<div id="mapData" style="position:absolute;top:0px;left:0px;z-Index:1;">
<script type="text/javascript"><!--
for (y=1600; y<1604; y++)
{
for (x=3616; x<3620; x++)
{
document.write('<img src="http://mt2.google.com/mt?v=w2.6&x='+x+'&y='+y+'&zoom=5">');
}
document.write("<br>");
}
// --></script>
</div>
<div style="position:absolute;top:285px;left:210px;z-Index:10;width:128px;height:128px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pop.png')"></div>
</body>
</html>

�@�����IE�ł����`�����l���t����PNG�摜���������\������܂��BMac�ł�IE��Google Maps�̑ΏۊO�ł������`�����l���t����PNG�������Ȃ��̂ŏ��O���܂��B
�@�ӂ������̕�����IE�Ƃ���ȊO�ŕ\������^�O��ύX���Ȃ���΂Ȃ�܂���BIE�Ƃ���ȊO�𕪊򂷂�Ηǂ��̂�document.all�I�u�W�F�N�g�i�R���N�V�����F�z��j�����݂��邩�ǂ����Ŕ��ʂ��܂��B���ۂ̃T���v���͈ȉ��̂悤�ɂȂ�܂��B

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^+�ӂ�������\������</title>
</head>
<body>
<div id="mapData" style="position:absolute;top:0px;left:0px;z-Index:1;">
<script type="text/javascript"><!--
for (y=1600; y<1604; y++)
{
for (x=3616; x<3620; x++)
{
document.write('<img src="http://mt2.google.com/mt?v=w2.6&x='+x+'&y='+y+'&zoom=5">');
}
document.write("<br>");
}
// --></script>
</div>
<script type="text/javascript"><!--
if (document.all)
{
document.write('<div style="position:absolute;top:285px;left:210px;z-Index:10;width:128px;height:128px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'pop.png\')"></div>');
}else{
document.write('<img src="pop.png" style="position:absolute;top:285px;left:210px;z-Index:10;">');
}
// --></script>
</body>
</html>

�@Google Maps�͒n�}���h���b�O���Ĉړ������邱�Ƃ��ł��܂��B�����ŁA�܂������قǂ̂ӂ�������Google Maps��Ńh���b�O�ł���悤�ɂ��܂��B�h���b�O����ɂ̓h���b�O����Ă��邩�ǂ����Ȃǂ̃C�x���g�𒲂ׂ܂��B�Ə��������Ƃ���ł���IE�ɂ́A���̂悤�ȃC�x���g���p�ӂ���Ă��܂����A���̃u���E�U�ł͗p�ӂ���Ă��Ȃ�����������ɓ��삪�قȂ��Ă��܂��B�����ŁA�ӂ�������Ń}�E�X�{�^���������ꂽ���𒲂׉�����Ă���ꍇ�Ƀh���b�O�A�{�^���������ꂽ��h���b�O�I���Ƃ���������g�ݍ��݂܂��B�ȉ��̃T���v����Firefox, Netscape 6�ȏ�, Safari�œ��삷����̂ł��B�v���O������Z�����邽��PNG�摜�̑����GIF�摜���g���Ă��܂��B

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^+�ӂ�������\������</title>
<script type="text/javascript"><!--
flag = false;
mx = my = 0;
window.document.onmousemove = dragImg;
window.document.onmouseup = dragOff;
function dragOn(){
flag = true;
offx = mx - parseInt(document.images["aPop"].style.left);
offy = my - parseInt(document.images["aPop"].style.top);
}
function dragOff(){ flag = false; }
function dragImg(e)
{
mx = e.pageX;
my = e.pageY;
if (!flag) return;
document.images["aPop"].style.top = my - offy;
document.images["aPop"].style.left = mx - offx;
return false;
}
// --></script>
</head>
<body>
<div id="mapData" style="position:absolute;top:0px;left:0px;z-Index:1;">
<script type="text/javascript"><!--
for (y=1600; y<1604; y++)
{
for (x=3616; x<3620; x++)
{
document.write('<img src="http://mt2.google.com/mt?v=w2.6&x='+x+'&y='+y+'&zoom=5">');
}
document.write("<br>");
}
// --></script>
</div>
<img src="pop.gif" id="aPop" style="position:absolute;top:285px;left:210px;z-Index:10;" onMousedown="dragOn();return false">
</body>
</html>

�@���̂܂܂ł�IE�ł͓��삵�܂���B����̓C�x���g���f���������قȂ��Ă��邽�߂ł��BIE�ł̓C�x���g����event�I�u�W�F�N�g���ɓ����Ă��邽�߁A���̃I�u�W�F�N�g���Q�Ƃ���悤�ɕύX���܂��B���ۂ̃T���v���͈ȉ��̂悤�ɂȂ�܂��B

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^+�ӂ�������\������</title>
<script type="text/javascript"><!--
flag = false;
mx = my = 0;
window.document.onmousemove = dragImg;
window.document.onmouseup = dragOff;
function dragOn(){
flag = true;
offx = mx - parseInt(document.images["aPop"].style.left);
offy = my - parseInt(document.images["aPop"].style.top);
}
function dragOff(){ flag = false; }
function dragImg(e)
{
mx = event.x;
my = event.y;

if (!flag) return;
document.images["aPop"].style.top = my - offy;
document.images["aPop"].style.left = mx - offx;
return false;
}
// --></script>
</head>
<body>
<div id="mapData" style="position:absolute;top:0px;left:0px;z-Index:1;">
<script type="text/javascript"><!--
for (y=1600; y<1604; y++)
{
for (x=3616; x<3620; x++)
{
document.write('<img src="http://mt2.google.com/mt?v=w2.6&x='+x+'&y='+y+'&zoom=5">');
}
document.write("<br>");
}
// --></script>
</div>
<img src="pop.gif" id="aPop" style="position:absolute;top:285px;left:210px;z-Index:10;" onMousedown="dragOn();return false">
</body>
</html>

�@Safari, Firefox, Nestcape�Ƃ̈Ⴂ�͐Ԏ��Ŏ������Q�s�����ł��BIE�Ƃ���ȊO�𔻕ʂ���ɂ͑O�q����document.all���g���Ē��ׂ܂��BSafari, Firefox, Netscape, IE�œ��삷��T���v���͈ȉ��̂悤�ɂȂ�܂��B

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^+�ӂ�������\������</title>
<script type="text/javascript"><!--
flag = false;
mx = my = 0;
window.document.onmousemove = dragImg;
window.document.onmouseup = dragOff;
function dragOn(){
flag = true;
offx = mx - parseInt(document.images["aPop"].style.left);
offy = my - parseInt(document.images["aPop"].style.top);
}
function dragOff(){ flag = false; }
function dragImg(e)
{
if (document.all)
{
mx = event.x;
my = event.y;
}else{
mx = e.pageX;
my = e.pageY;
}
if (!flag) return;
document.images["aPop"].style.top = my - offy;
document.images["aPop"].style.left = mx - offx;
return false;
}
// --></script>
</head>
<body>
<div id="mapData" style="position:absolute;top:0px;left:0px;z-Index:1;">
<script type="text/javascript"><!--
for (y=1600; y<1604; y++)
{
for (x=3616; x<3620; x++)
{
document.write('<img src="http://mt2.google.com/mt?v=w2.6&x='+x+'&y='+y+'&zoom=5">');
}
document.write("<br>");
}
// --></script>
</div>
<img src="pop.gif" id="aPop" style="position:absolute;top:285px;left:210px;z-Index:10;" onMousedown="dragOn();return false">
</body>
</html>

�@���ۂ�Google Maps�ł͒n�}�S�̂��h���b�O���Ȃ���n�}�f�[�^��ǂݍ��݃��A���^�C���ɕ\�����܂��B���܂ł̕��@��g�ݍ��킹��ƁA���̂悤�ȏ������������邱�Ƃ��ł��܂��B�ȉ��̃T���v���̓N���b�s���O���Ă��Ȃ����̂ł��B�i�N���b�N�ʒu��ۑ����Ă��Ȃ��̂ŁA������ƕςȂƂ��낪����܂��B���̑��A���ȕ���������܂����A���e�͂��������j

�y�T���v�������s�����z
<html>
<head>
<title>Google Maps�̃f�[�^+�ӂ�������\������</title>
<script type="text/javascript"><!--
mapBaseSx = sx = 3610;
mapBaseSy = sy = 1600;
dx = 1;
dy = 1;
mapX = 0;
mapY = 0;
blockSize = 256; //�@�u���b�N�T�C�Y
flag = false;
mx = my = 0;
baseX = baseY = 0;
dName = "dragImage";
window.document.onmousemove = dragImg;
window.document.onmouseup = dragOff;
function dragOn(){
flag = true;
baseX = mx;
baseY = my;
}
function dragOff()
{
flag = false;
mapBaseSx = sx;
mapBaseSy = sy;
}
function dragImg(e)
{
if (document.all)
{
mx = event.x;
my = event.y;
}else{
mx = e.pageX;
my = e.pageY;
}
if (!flag) return;
mapX = baseX - mx;
mapY = baseY - my;
sx = mapBaseSx + mapX / blockSize;
sy = mapBaseSy + mapY / blockSize;
viewMap();
document.getElementById("mapData").style.left = -mapX % blockSize;
document.getElementById("mapData").style.top = -mapY % blockSize;
return false;
}
function viewMap()
{
var x,y,imgURL;
for (y=0; y<3; y++)
{
for (x=0; x<3; x++)
{
imgURL = "http://mt2.google.com/mt?v=w2.6&x="+Math.floor(sx+x)+"&y="+Math.floor(sy+y)+"&zoom=5";
document.images["map"+x+y].src = imgURL;
}
}
}
// --></script>
</head>
<body>
<div id="mapData" style="position:absolute;top:0px;left:0px;">
<script type="text/javascript"><!--
for (y=0; y<3; y++)
{
for (x=0; x<3; x++)
{
document.write('<img src="trans.gif" width="256" height="256" name="map'+x+y+'">');
}
document.write("<br>");
}
viewMap();
// --></script>
</div>
<img src="trans.gif" id="dragImage" style="position:absolute;top:0px;left:0px;width:768px;height:768px;z-Index:10;" onMousedown="dragOn();return false">
</body>
</html>

�@�Ō�ɃN���b�s���O�̈��ݒ肷��΂ł�������ł��B