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

Resizes the map based on the specified width and height.

VEMap.Resize(width, height);

Parameters

Parameter Description

width

The width, in pixels, of the map. Optional.

height

The height, in pixels, of the map. Optional.

Remarks

If this method is called with no parameters, the map is resized to fit the entire DIV element.

This method triggers the VEMap.onresize Event.

Example

<!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;
 
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            map.AttachEvent("onresize", OnResize);
         }   
     
         function ResizeMap()
         {
            if ((document.getElementById('txtWidth').value != "" && document.getElementById('txtHeight').value != "") && (!isNaN(document.getElementById('txtWidth').value) && !isNaN(document.getElementById('txtHeight').value)))
            {
               map.Resize(document.getElementById('txtWidth').value, document.getElementById('txtHeight').value);
               myMap.style.width = document.getElementById('txtWidth').value + "px";
               myMap.style.height = document.getElementById('txtHeight').value + "px";
            }
            else
            {
               alert("Please enter a valid numeric value.");
            }
         }
     
         function OnResize(e)
         {
            alert(e.eventName + " has been called.");
            return 0;
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      Width: <input id="txtWidth" type="text" value="400" style="width:50px" /> pixels&nbsp;|&nbsp;
      Height: <input id="txtHeight" type="text" value="400" style="width:50px" /> pixels&nbsp;
      <input id="btnResize" type="button" value="Resize Map" name="btnResize" onclick="ResizeMap()">
   </body>
</html>