地震を表現する
（注意！）この記事は、旧APIであるGoogle Maps API version 2を解説したものです。version 2の利用は推奨されていないので、意図的に旧バージョンの情報を探していない場合は、新しいバージョンの解説をご覧下さい。
ここでは、地図を揺らして地震を表現する方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。 地震を表現するために、id=mapのDIVをJavaScriptで小刻みに移動させています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.033333, 139.15), 11);
GEvent.addListener(map, 'click', quake);
}
var count = 0; // 回数を数える用変数
var mapdoc = document.getElementById("map");
var left_orig = mapdoc.style.left;
var top_orig = mapdoc.style.top;
var x_array = new Array(-10, 10, -18, 9, -16,
13, -4, 14, -10, 4,
-10, -10, 10, -18, 4);
var y_array = new Array( 8, -18, 10, -14, 18,
-10, 16, -6, 18, -9,
5, 8, -18, 10, -4);
function quake() {
// 位置を設定
mapdoc.style.left = (left_orig + x_array[count]) + 'px';
mapdoc.style.top = (top_orig + y_array[count]) + 'px';
count++;
if (count < x_array.length) {
// 配列が続く限り繰り返す
setTimeout("quake()", 50);
} else {
// 初期状態に戻す
count = 0;
mapdoc.style.left = left_orig;
mapdoc.style.top = top_orig;
}
}
//]]>
</script>
</head>
<body>
<div id="map"
style="width:400px;height:400px;"></div>
</body>
</html>
上記サンプルでは、地図をクリックすると地図全体が揺れます。 地図全体の位置を小刻みに変更するために、移動用functionをsetTimeoutで繰り返し呼び出しています。
表示例
表示例です。
