例－１：ドラッグ＆ドロップされた領域を取得する

マーカーをドラッグ＆ドロップすると、その開始位置の緯度経度、終了地点の緯度経度、中心座標の緯度経度を表示します。
<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.co.jp/maps?file=api&v=2&key=[あなたのAPIキー]&sensor=false"
 type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    
    //描画されたラインを記憶しておくための変数
    //null にしておくことで初期化
    var line = null;
    
    //ドラッグの開始地点と終了地点を記憶するための変数
    var p1, p2;
    
    //吹き出しの表示用
    var infoTxt = "マーカーを<b>ドラッグ＆ドロップ</b>してください";
    
    //地図のハンドルを保存するための変数
    var map;
    
    function load() {
      if (GBrowserIsCompatible()) {
        //地図の中心地点を設定
        var centerPos = new GLatLng(35.677335, 139.744613);

        //地図を作成
        map = new GMap2(document.getElementById("map"));
        map.setCenter(centerPos, 16);

        //マーカーを作成
        var marker = new GMarker(centerPos, {draggable: true});

        GEvent.addListener(marker, "dragstart", function() {
          //マーカーがドラッグを開始したら、現在の経度緯度をp1に記憶する
          p1 = marker.getLatLng();
          
          //吹き出しを閉じる
          marker.closeInfoWindow();
        });

        GEvent.addListener(marker, "drag", function() {
            //マーカーがドラッグ中は、現在の経度緯度をp2に記憶する
            p2 = marker.getLatLng();
            
            //ラインを描画する
            drawLine([p1, p2]);
        });

        GEvent.addListener(marker, "dragend", function() {
            //マーカーがドラッグを終了したので、現在の経度緯度をp2に記憶する
            p2 = marker.getPoint();
            
            //
            var points = new Array();
            points.push(p1);
            points.push(new GLatLng(p1.lat(), p2.lng()));
            points.push(p2);
            points.push(new GLatLng(p2.lat(),p1.lng()));
            points.push(p1);

            //ラインを削除
            if (line) {
              map.removeOverlay(line);
            }
            
            //四角形の描画
            drawLine(points);
            
            //中心座標の取得
            var box = new GBounds(points);
            var pnt1 = new GLatLng(box.minY, box.minX);
            var pnt2 = new GLatLng(box.maxY, box.maxX);
            var bound = new GLatLngBounds(pnt1,pnt2);
            var center = bound.getCenter();

            //結果を吹き出しに表示
            infoTxt = "開始位置:" + p1 + "<br>"
                    + "終了位置:" + p2 + "<br>"
                    + "中心座標:" + center;
            marker.openInfoWindowHtml(infoTxt);
        });

        GEvent.addListener(marker, "click", function() {
            //マーカーがクリックされたら、吹き出しを開く
            marker.openInfoWindowHtml(infoTxt);
        });

        //マーカーを地図上に配置
        map.addOverlay(marker);
        
        //マーカーに対して、擬似的にイベント"click"を発生させる
        GEvent.trigger(marker,"click");
      }
    }
    
    //======================================================
    //  配列 points の位置を全て通るラインを描画する
    //======================================================
    function drawLine(points) {
      //直前のラインを削除する
      if (line != null) {
        map.removeOverlay(line);
      }
      
      //ラインを描画する
      line = new GPolyline(points, "#FF0000", 10);
      map.addOverlay(line);
    }

    //ページが読み込まれたら、load関数を呼び出す。
    window.onload = load;
    
    //別のページへ移動するときにGUnload関数を呼び出して、メモリ解放
    window.onunload = GUnload;
    //]]>
    </script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 500px;"></div>
  </body>
</html>