VEMap.HideFindControl Method

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.

Deprecated. Removes the Find control from the map.

Note This method is deprecated. Use the example below to create a custom Find control.

VEMap.HideFindControl();

Remarks

The Find control enables users to find information and locations on the map. By default, the Find control is not displayed on the map. You can display it by calling the VEMap.ShowFindControl Method.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Custom Find Control</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>

<style type="text/css">
    .FindControlDiv
    {
        float: left;
        border:1px solid #cbcbcb; 
        background-color:white; 
        padding:5px; 
        z-index:200; 
        font-family:Verdana,sans-serif; 
        font-size:8pt;
        font-weight: bold;
        width: 435px;
        height: 50px;
    }
    .WhatControlDiv
    {
        width: 200px;   
        position: absolute;
        top: 0px;
        left: 0px;
        padding:2px; 
    }
    .WhereControlDiv
    {
        width: 200px;
        position: absolute;
        top: 0px;
        left: 190px;    
        padding:2px; 
    }
    .FindButtonDiv
    {
        position: absolute;
        top: 0px;
        left: 390px;        
        padding:2px; 
        margin-top: 12px;
    }
</style>
<script type="text/javascript">

// This example creates a custom Find control.

    var map = null;
    var findControl = null;
    
    function GetMap()
    {
        map = new VEMap('myMap');
        map.LoadMap();
        map.AttachEvent("oninitmode", CheckShim);
    }
    
    //Check to make sure that there's a Shim on the Find Control in 3D.
    function CheckShim()
    {
        if(findControl != null)
        {
            if(map.GetMapMode() == VEMapMode.Mode2D)
            {
                //2D
                RemoveShim(findControl);
            }else
            {
                //3D
                AddShim(findControl);
            }
        }
    }
    
    //Adds the Find control to the map
    function AddFindControl()
    {
        if(findControl == null)
        {
            var el = document.createElement("div");
            el.className = "FindControlDiv";
            el.style.left = 100 + "px";
            el.style.top = 20 + "px";
            
            el.innerHTML = "<div class=WhatControlDiv >" +
                               "What <input type='text' id='whatInput' size='25' onfocus='this.select()' />" +
                           "</div>" +
                           "<div class=WhereControlDiv >" +
                                "Where <input type='text' id='whereInput' size='25' onfocus='this.select()' />" +
                           "</div>" +
                           "<div class=FindButtonDiv >" +
                                "<button onclick='DoFind();' type='submit' >Find</button>" +
                           "</div>";
                           
            

            map.AddControl(el);

            findControl = el;
            CheckShim()
        }
    }
    
    //Remove the Find control from the map
    function RemoveFindControl()
    {
        if(findControl != null)
        {
            map.DeleteControl(findControl);
            findControl = null;
        }
    }
    
    //Add a shim to the given element
    function AddShim(el)
    {
        var shim = document.createElement("iframe");
        shim.id = "myShim";
        shim.frameBorder = "0";
        shim.style.position = "absolute";
        shim.style.zIndex = "1";
        shim.style.top  = el.style.top;
        shim.style.left = el.style.left;
        shim.width  = el.offsetWidth;
        shim.height = el.offsetHeight;
        el.shimElement = shim;
        el.parentNode.insertBefore(shim, el);
    }

    //Remove the shim from the given element
    function RemoveShim(el) 
    {
        if(el.shimElement != null)
        {
            el.shimElement.removeNode();
            el.shimElement = null;
        }
    }

    //Do a find when user clicks on the Find button
    function DoFind()
    {
        var whatInput = document.getElementById("whatInput");
        var whereInput = document.getElementById("whereInput");
        
        if(whatInput.value != "" || whereInput.value != "")
        {
            map.Find(whatInput.value, whereInput.value);
        }
    }
</script>
<body onload="GetMap();">
    <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
    <button onclick="AddFindControl();">Show Find Control</button>
    <button onclick="RemoveFindControl();">Hide Find Control</button>
</body>
</html>

See Also

Reference

VEMap.Find Method