none
when using AJAX v7, how does one set the zoom level ? RRS feed

  • Question

  • I'm finding the new ajax v7 extremely difficult to work with. Either that or the API documentation is too cumbersome for me to find simple features that were available in the previous mapcontrol versions.. anyways, I digress..

    How can I set the zoom level of my map? For example, if I wanted to build a custom/mini dashboard with a zoom button (since v7 doesnt provide a mini dashboard option, I have to build my own).

    In v6.3, this could be done by:  map.SetCenterAndZoom(latLong, zoomLevel);
    Thanks in advance for any tips or assistance.

     


    • Moved by Ricky_Brundritt Friday, March 9, 2012 5:20 PM (From:Bing Maps: Map Control and Web services Development)
    Friday, April 22, 2011 7:06 PM

Answers

  • Try this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      <script type="text/javascript">
      var map = null;
      function GetMap()
      { 
       map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
           {credentials: "Bing Key Here",
           center: new Microsoft.Maps.Location(54, -2),
           mapTypeId: Microsoft.Maps.MapTypeId.road,
           zoom: 7,
           showDashboard: false
           });
      }
    
     function ZoomIn()
     {
      var zoomLevel = map.getZoom() + 1;
      map.setView({ zoom: zoomLevel });
     }
    
     function ZoomOut()
     {
      var zoomLevel = map.getZoom() - 1;
      map.setView({ zoom: zoomLevel });
     }
      </script>
     </head>
     <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:300px;"></div>
      <button style="border: 0; background: transparent" onclick="ZoomOut();">
       <img src="http://icons.iconarchive.com/icons/visualpharm/must-have/48/Zoom-Out-icon.png" alt="zoom out" />
      </button>
      <button style="border: 0; background: transparent" onclick="ZoomIn();">
       <img src="http://icons.iconarchive.com/icons/visualpharm/must-have/48/Zoom-In-icon.png" alt="zoom in" />
      </button>
     </body>
    </html>
    


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    • Marked as answer by Lan-Lord Friday, April 22, 2011 7:48 PM
    Friday, April 22, 2011 7:25 PM
    Moderator