いつもNAVI API マニュアル

実行結果

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

ユーザコントロールを削除するには、ZDC.MapクラスのremoveWidget()を利用します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,usercontrol.js&enc=EUC&force=1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
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: 3
    });

    /* ユーザコントロールを作成 */
    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:500px; height:300px; top:0px; left:20px; position:absolute;"></div>
    <div id="IBox" style="top:0px; left:540px; position:absolute;">
        <input type="button" value="removeWidget" onclick="removeWidget();">
    </div>
</body>
</html>