<html>
<head>
<script type="text/javascript" src="/maps/API/VBDMapAPI.js?key=e7vjH+pgQHuSyV75dwG6hq0WQek+cVqm"></script>
<script type="text/javascript">
function MyControl()
{
    this.initialize = initialize;
    this.getDefaultPosition = getDefaultPosition;
    this.vType = vType;

    function initialize(map)
    {
        this.id = 'MyControl';
        var divcontainer = document.createElement("div");
        divcontainer.id = 'MyControl';
        divcontainer.style.position = 'absolute';
        divcontainer.style.border = "1px solid black";
        var divZoomIn = document.createElement("div");
        divZoomIn.style.cursor = 'pointer';
        divcontainer.appendChild(divZoomIn);
        divZoomIn.appendChild(document.createTextNode("Phóng to"));
        VEvent.addDOMListener(divZoomIn, "click", function() { map.zoomIn(); });

        var divZoomOut = document.createElement("div");
        divZoomOut.style.cursor = 'pointer';
        divcontainer.appendChild(divZoomOut);
        divZoomOut.appendChild(document.createTextNode("Thu nhỏ"));
        VEvent.addDOMListener(divZoomOut, "click", function() { map.zoomOut(); });
        map.getContainer().appendChild(divcontainer);
    }

    function getDefaultPosition()
    {
        var defaultpos = new VControlPosition(V_ANCHOR_TOP_LEFT, new VSize(0, 0));
        return defaultpos;
    }

    function vType()
    {
        return 'MyControl';
    }
}

MyControl.prototype = new VControl();

function loadMap()
{
    if (VBrowserIsCompatible())
    {
       var map = new VMap(document.getElementById('container'));
       map.setCenter(new VLatLng(10.8152328, 106.680505), 4);
       map.addControl(new VScaleControl());
       map.addControl(new MyControl());
    }
}
</script>
</head>
<body onload="loadMap()">
<div id="container" style="height:500px; position:relative; margin:10px; border:1px #b1c4d5 solid;"></div>
</body>
</html>