ユーザコントロールを削除する

実行結果

次の例では、ボタンを押した際にユーザコントロールを削除します。
ソースコードと解説

ユーザコントロールを削除するには、ZDC.MapクラスのremoveWidget()を利用します。
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,usercontrol.js&enc=UTF8" type="text/javascript"></script>
<script type="text/javascript">

var map, widget,
    lat = 35.6778614, lon = 139.7703167;

function loadMap() {
    map = new ZDC.Map(
    document.getElementById('ZMap'),
    {
        latlon: new ZDC.LatLon(lat, lon),
        zoom: 9,
        mapType: ZDC.MAPTYPE_HIGHRES_LV18
    });

    /* スケールバーを作成 */
    map.addWidget(new ZDC.ScaleBar());

    /* ユーザコントロールを作成 */
    var imgurl = '../../image/usercontrol/usrctrl_css.png';
    var ctrl = {
        home:
        {
            src: imgurl,
            pos: {top: 18, left: 28},
            imgTL: {top: 0, left: 0},
            imgSize: {width: 22, height: 22}
        },
        north:
        {
            src: imgurl,
            pos: {top: 0, left: 30},
            imgTL: {top: 0, left: 30},
            imgSize: {width: 19, height: 19}
        },
        east:
        {
            src: imgurl,
            pos: {top: 20, left: 50},
            imgTL: {top: 0, left: 50},
            imgSize: {width: 19, height: 19}
        },
        south:
        {
            src: imgurl,
            pos: {top: 40, left: 30},
            imgTL: {top: 0, left: 70},
            imgSize: {width: 19, height: 19}
        },
        west:
        {
            src: imgurl,
            pos: {top: 20, left: 10},
            imgTL: {top: 0, left: 90},
            imgSize: {width: 19, height: 19}
        },
        northeast:
        {
            src: imgurl,
            pos: {top: 0, left: 50},
            imgTL: {top: 0, left: 110},
            imgSize: {width: 19, height: 19}
        },
        southeast:
        {
            src: imgurl,
            pos: {top: 40, left: 50},
            imgTL: {top: 0, left: 130},
            imgSize: {width: 19, height: 19}
        },
        southwest:
        {
            src: imgurl,
            pos: {top: 40, left: 10},
            imgTL: {top: 0, left: 150},
            imgSize: {width: 19, height: 19}
        },
        northwest:
        {
            src: imgurl,
            pos: {top: 0, left: 10},
            imgTL: {top: 0, left: 170},
            imgSize: {width: 19, height: 19}
        },
        bar:
        {
            src: imgurl,
            pos: {top: 80, left: 29},
            imgTL: {top: 62, left: 20},
            imgSize: {width: 19, height: 114/19*13}
        },
        btn:
        {
            src: imgurl,
            pos: {top: 0, left: 1},
            imgTL: {top: 60, left: 50},
            imgSize: {width: 17, height: 11}
        },
        minus:
        {
            src: imgurl,
            pos: {top: 60, left: 20},
            imgTL: {top: 60, left: 70},
            imgSize: {width: 19, height: 19}
        },
        plus:
        {
            src: imgurl,
            pos: {top: 60, left: 40},
            imgTL: {top: 60, left: 90},
            imgSize: {width: 19, height: 19}
        },
        open:
        {
            src: imgurl,
            pos: {top: 80, left: 31},
            imgTL: {top: 60, left: 170},
            imgSize: {width: 17, height: 12}
        },
        close:
        {
            src: imgurl,
            pos: {top: 160, left: 31},
            imgTL: {top: 60, left: 150},
            imgSize: {width: 17, height: 12
            }
        }
    };
    var opts = {start: -2, interval: 6};
    widget = new ZDC.UserControl(ctrl, opts);
    map.addWidget(widget);
};

/* ユーザコントロールを削除 */
function removeWidget() {
    map.removeWidget(widget);
};

</script>
</head>

<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:750px; height:500px; top:0px; left:20px; position:absolute;"></div>
    <div id="IBox" style="top:20px; left:650px; position:absolute;">
        <input type="button" value="removeWidget" onclick="removeWidget();">
    </div>
</body>
</html>