Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

Changing the Map View

Bing

This topic describes how to change the map that is displayed.

Setting the Initial Map View

You can set the map view when you first load the map you can use any of the options available in the MapOptions Object or ViewOptions Object.

The code below initializes the map with a specific view. The imagery displayed is set to Bird’s eye using the mapTypeId option. Valid map type IDs are listed in the MapTypeId Enumeration topic.

<!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">
      function GetMap()
      {   
         var mapOptions = {
         credentials: "Your Bing Maps Key",
         center: new Microsoft.Maps.Location(47.592, -122.332),
         mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
         zoom: 17,
         showScalebar: false
         }

         var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
      }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>       
   </body>
</html>

Changing the Map View

If you want to change the map after it has loaded, use the setView method of the Map Class. The ViewOptions Object contains available options that can be set.

The example below sets the map view to the specified zoom level.

<!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: "Your Bing Maps Key", mapTypeId: Microsoft.Maps.MapTypeId.road});
      }

      function SetZoom()
      {
         var zoomLevel = parseInt(document.getElementById('txtZoom').value);
         map.setView({zoom:zoomLevel});
      }

      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>       
      Zoom Level:
      <input id="txtZoom" type="text" value="1"/>
      <input id="btnZoom" type="button" value="Click to set the zoom level" onclick="SetZoom();"/>

   </body>
</html>

To set the boundaries of the view instead of centering on a point, use the bounds option as shown in the code below.

<!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: "Your Bing Maps Key"});

         var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(47.618594, -122.347618), new Microsoft.Maps.Location(47.620700, -122.347584), new Microsoft.Maps.Location(47.622052, -122.345869));

         map.setView({ bounds: viewBoundaries});

      }

      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>       
   </body>
</html>
Show:
© 2015 Microsoft