VEMap.ShowFindControl 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.

Deprecated. Shows the Find control, which enables users to enter search queries.

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

VEMap.ShowFindControl(top, left);

Parameters

Parameter Description

top

An integer specifying the number of pixels between the top edge of the map and the top edge of the Find control. Optional. The default is 35 pixels.

left

An integer specifying the number of pixels between the left edge of the map and the left edge of the Find control. Optional. The default is 195 pixels.

Remarks

By default, the Find control is not visible. By calling this method, you can quickly and easily provide search capabilities to your map.

To hide the Find control, call the VEMap.HideFindControl 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.HideFindControl Method
VEMap.Find Method