GMap Rectangle Events

View this example full screen.

CoString of GMap Rectangle Events

View this example in sandbox :
o,24.88065,121.065427&z,15&r,6,ef1568,1,61ed04,0.3,24.88227086962545,121.05922937393188,24.883789196412685,121.06319904327393

JavaScript of GMap Rectangle Events

var g_oCoStrMap = null;
var g_oRectangle = null;
var g_oInfoWindow = null;
function initialize()
{
    var oMapOptions = {
        coStrType: zhupiter.CoStr.CoStrType.GMAP,
        center: new google.maps.LatLng(24.880650, 121.065427),
        zoom: 15
    };
    g_oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);

    var oBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(24.88227086962545, 121.05922937393188),
        new google.maps.LatLng(24.883789196412685, 121.06319904327393)
    );
    g_oRectangle = new zhupiter.CoStr.Rectangle({
        bounds: oBounds,
        editable: true,
        draggable: true
    });
    g_oRectangle.setMap(g_oCoStrMap);

    zhupiter.CoStr.event.addListener(g_oRectangle, 'bounds_changed', onBoundsChanged);

    g_oInfoWindow = new zhupiter.CoStr.InfoWindow();
}

function onBoundsChanged(oInEv)
{
    var oNe = g_oRectangle.getBounds().getNorthEast();
    var oSw = g_oRectangle.getBounds().getSouthWest();

    var sStr = '<b>Rectangle moved.</b><br>' +
        'New north-east corner: ' + oNe.lat() + ', ' + oNe.lng() + '<br>' +
        'New south-west corner: ' + oSw.lat() + ', ' + oSw.lng();

    g_oInfoWindow.setContent(sStr);
    g_oInfoWindow.setPosition(oNe);

    g_oInfoWindow.setMap(g_oCoStrMap);
}

zhupiter.CoStr.event.addDomListener(window, 'load', initialize);

JavaScript + HTML of GMap Rectangle Events

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
        <meta charset='utf-8'>
        <title>GMap Rectangle Events</title>
        <style>
        html, body, #map_canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
        }
        </style>
        <script src='https://maps.googleapis.com/maps/api/js'></script>
        <script src='//costr.zhupiter.com/js/'></script>
        <script>
var g_oCoStrMap = null;
var g_oRectangle = null;
var g_oInfoWindow = null;
function initialize()
{
    var oMapOptions = {
        coStrType: zhupiter.CoStr.CoStrType.GMAP,
        center: new google.maps.LatLng(24.880650, 121.065427),
        zoom: 15
    };
    g_oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);

    var oBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(24.88227086962545, 121.05922937393188),
        new google.maps.LatLng(24.883789196412685, 121.06319904327393)
    );
    g_oRectangle = new zhupiter.CoStr.Rectangle({
        bounds: oBounds,
        editable: true,
        draggable: true
    });
    g_oRectangle.setMap(g_oCoStrMap);

    zhupiter.CoStr.event.addListener(g_oRectangle, 'bounds_changed', onBoundsChanged);

    g_oInfoWindow = new zhupiter.CoStr.InfoWindow();
}

function onBoundsChanged(oInEv)
{
    var oNe = g_oRectangle.getBounds().getNorthEast();
    var oSw = g_oRectangle.getBounds().getSouthWest();

    var sStr = '<b>Rectangle moved.</b><br>' +
        'New north-east corner: ' + oNe.lat() + ', ' + oNe.lng() + '<br>' +
        'New south-west corner: ' + oSw.lat() + ', ' + oSw.lng();

    g_oInfoWindow.setContent(sStr);
    g_oInfoWindow.setPosition(oNe);

    g_oInfoWindow.setMap(g_oCoStrMap);
}

zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id='map_canvas'></div>
    </body>
</html>