VEMap.DeleteControl Method

  • Article

You are not viewing the latest version of the AJAX control. Bing Maps AJAX V7 is the recommended JavaScript control for Bing Maps. If you need this documentation, it is available in as a CHM or PDF download.

Removes the specified control from the map.

VEMap.DeleteControl(element);

Parameters

Parameter Description

element

An HTML element that contains the control to be deleted

Examples

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

      <script type="text/javascript">
         var map = null;
         var i = 0;
            
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();       
         }
         
         function AddControl()
         {
            var el = document.createElement("div"); 
            el.id = "myControl" + i; 
            el.style.top = 100 + (i * 10); 
            el.style.left = 100 + (i * 10);            
            el.style.border = "2px solid black";
            el.style.background = "White";
            el.innerHTML = el.id;  
            map.AddControl(el);
            addShim(el);
            counter.value = i;
            i++;
         }
         
         function addShim(el)
         {
            var shim = document.createElement("iframe");
            shim.id = "myShim" + i;
            shim.frameBorder = "0";
            shim.style.position = "absolute";
            shim.style.zIndex = "1";
            shim.style.top  = el.offsetTop;
            shim.style.left = el.offsetLeft;
            shim.width  = el.offsetWidth;
            shim.height = el.offsetHeight;
            el.shimElement = shim;
            el.parentNode.insertBefore(shim, el);
         }
         
         function DeleteControl()
         {
            var myControl = document.getElementById("myControl" + counter.value);

            if (myControl!=null)
            {
               var myControlID = myControl.id;
               map.DeleteControl(myControl);
               alert("Control " + myControlID + " has been deleted.");
            }
            else
            {
               alert("No control with ID " + counter.value + " was found.");
               return;
            }
            
            var myShim = document.getElementById("myShim" + counter.value);

            if (myShim!=null)
            {
               myShim.parentNode.removeChild(myShim);
            }

            myShim = null;
            i--;
            counter.value = i;
         }
         
         function HideControl()
         {
            var myControl = document.getElementById("myControl" + counter.value);

            if (myControl!=null)
            {
               map.HideControl(myControl);
               alert(myControl.id + " is now hidden from view.");
            }
            else
            {
               alert("No control with ID " + counter.value + " was found.");
               return;
            }
         }
         
         function ShowControl()
         {
            var myControl = document.getElementById("myControl" + counter.value);
   
            if (myControl!=null)
            {
               map.ShowControl(myControl);
               alert(myControl.id + " has been restored.");
            }
            else
            {
               alert("No control with ID " + counter.value + " was found.");
               return;
            }
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial;font-size:x-small">
      <div id='myMap' style="position: relative; width: 400px; height: 400px;">
      </div>
      Control:&nbsp;
      <input type="text" id="counter" size="20" value="0"/>
      <br />
      <input type="button" value="add control" onclick="AddControl();"/>
      <input type="button" value="delete control" onclick="DeleteControl();"/>
      <br/>
      <input type="button" value="hide control" onclick="HideControl();"/>
      <input type="button" value="show control" onclick="ShowControl();"/>
   </body>
</html>

See Also

Reference

VEMap.AddControl Method
VEMap.HideControl Method