Share via

VEMap.SetCenterAndZoom Method

  • Article
  • 08/26/2013

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.

Centers the map to a specific latitude and longitude and sets the zoom level.

VEMap.SetCenterAndZoom(VELatLong, zoomLevel);

Parameters

Parameter Description

VELatLong

A VELatLong Class object that contains the latitude and longitude of the point on which to center the map,

zoomLevel

The zoom level for the map. Valid values range from 1 through 19.

Remarks

The SetCenterAndZoom method returns results faster than if you call both the VEMap.SetCenter Method and the VEMap.SetZoomLevel Method separately.

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>

See Also

Reference

VEMap.GetCenter Method