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

Increases the map zoom level by 1.

VEMap.ZoomIn();

Remarks

Valid values range from 1 through 19. If you call the ZoomIn method when the current zoom level is already at the maximum, the zoom level does not change.

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;
         var latLong = null;
         var zoomLevel = 3;
 
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            map.SetZoomLevel(zoomLevel);

            // zoom to cursor and center
            map.SetMouseWheelZoomToCenter(false);

            document.getElementById('txtZoom').value = zoomLevel;
            map.AttachEvent("onclick", GetLatLong);
            latLong = map.GetCenter();
            divInfo.innerHTML = latLong;
         }  
     
         function GetLatLong(e)
         {
            //Get the pixel coordinates from the click event, convert to LatLong value
            var x = e.mapX;
            var y = e.mapY;
            pixel = new VEPixel(x, y);
            latLong = map.PixelToLatLong(pixel);
            divInfo.innerHTML = latLong;
         }
     
         function SetCenterAndZoom()
         {   
            map.SetCenterAndZoom(latLong, zoomLevel);
         }
     
         function SetCenter()
         {
            map.SetCenter(latLong);
         }
     
         function SetZoom()
         {
            map.SetZoomLevel(zoomLevel);
         }
     
         function ZoomIn()
         {
            //Increase zoom level by a factor of 1
            map.ZoomIn();
            document.getElementById('txtZoom').value = map.GetZoomLevel();
         }
     
         function ZoomOut()
         {
            //Decrease zoom level by a factor of 1
            map.ZoomOut();
            document.getElementById('txtZoom').value = map.GetZoomLevel();
         }
     
         function ValidateEntry()
         {
           //Check to make sure zoom level is within range
           if (document.getElementById('txtZoom').value > 0 && document.getElementById('txtZoom').value <= 19)
           {
              zoomLevel = document.getElementById('txtZoom').value;
           }
           else
           {
              alert("Enter a value between 1 and 19.");
           }
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      Click the map to select a center point.<br />
      <div id="divInfo">&nbsp;<br /></div>
      Zoom Level: <input id="txtZoom" type="text" value="" onchange="ValidateEntry()"/><br />
      <input id="btnSetCZ" type="button" value="Set Center and Zoom" onclick="SetCenterAndZoom()"><br />
      <input id="btnSetCenter" type="button" value="Set Center" onclick="SetCenter()"><br />
      <input id="btnSetZoom" type="button" value="Set Zoom" onclick="SetZoom()"><br />
      <input id="btnZoomIn" type="button" value="Zoom in by 1" onclick="ZoomIn()">
      <input id="btnZoomOut" type="button" value="Zoom out by 1" onclick="ZoomOut()">
   </body>
</html>