地震を表現する

(注意!)この記事は、旧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で繰り返し呼び出しています。

表示例

表示例です。