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

Loads the specified map. All parameters are optional.

Copy 

VEMap.LoadMap(VELatLong, zoom, style, fixed, mode, showSwitch, tileBuffer, mapOptions);

Parameters

Parameter Description

VELatLong

A VELatLong Class object that represents the center of the map. Optional.

zoom

The zoom level to display. Valid values range from 1 through 19. Optional. Default is 4.

style

A VEMapStyle Enumeration value specifying the map style. Optional. Default is VEMapStyle.Road.

fixed

A Boolean value that specifies whether the map view is displayed as a fixed map that the user cannot change. Optional. Default is false.

mode

A VEMapMode Enumeration value that specifies whether to load the map in 2D or 3D mode. Optional. Default is VEMapMode.Mode2D.

showSwitch

A Boolean value that specifies whether to show the map mode switch on the dashboard control. Optional. Default is true (the switch is displayed).

tileBuffer

How much tile buffer to use when loading map. Default is 0 (do not load an extra boundary of tiles). This parameter is ignored in 3D mode.

mapOptions

A VEMapOptions Class that specifies other map options to set.

Before calling this method, you must initialize the map object by using the VEMap Constructor.

If you want to use a callback function with the map control, set the VEMap.onLoadMap Property before calling the LoadMap method.

Use the VEMap.Dispose Method before calling LoadMap a second time.

To 'lock' the map in a certain position, either set the fixed parameter to true when loading the map or disable mouse events during the application session. The following code disables mouse events.

Copy 
// Attach an event handler for a mousedown event.
map.AttachEvent("onmousedown", DisableMap);

// When the mouse is used, the DisableMap function will
//   get called. Returning true will disable the mousedown
//   event, which disables panning.
function DisableMap()
{
   return true;
}

JScript
Copy 
<!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=6.3"></script>

      <script type="text/javascript">
         var map = null;
         var selStyle = VEMapStyle.Aerial;
         var selMode = VEMapMode.Mode2D;
         var zoom = 4;
     
         // Demonstrate LoadMap, with a UI for trying out all of the parameters.
         function GetMap()
         {
            var latLon = new VELatLong(document.getElementById('txtLat').value, document.getElementById('txtLong').value); 
                
            if (document.getElementById('txtZoom').value > 0 && document.getElementById('txtZoom').value <= 19)
            {
               zoom = document.getElementById('txtZoom').value;
            }
            else
            {
               alert("Enter a value between 1 and 19.");
            }
         
            if (chkFixed.checked)
            {
               fixed=1;
            }
            else
            {
               fixed=0;
            }
         
            if (chkShowSwitch.checked)
            {
               showSwitch=1;
            }
            else
            {
               showSwitch=0; 
            }

            map = new VEMap('myMap'); 
            map.LoadMap(latLon, zoom, selStyle, fixed, selMode, showSwitch);

            map.AttachEvent("onobliqueenter", SetObliqueRadio);
            map.AttachEvent("onobliqueleave", SetObliqueRadio);
         }   
     
         function SetStyle(s)
         {
            selStyle = s;
         }
     
         function SetMode(m)
         {
            if (modeRadios.mode[0].Checked)
            {
               selMode = VEMapMode.Mode2D;
            }
            else
            {
               selMode = VEMapMode.Mode3D;
            }
         }
     
         function SetObliqueRadio(event)
         {
            if (event.eventName == "onobliqueenter")
            {
               styleRadios.style[3].disabled=null;
            }
            else if (event.eventName == "onobliqueleave")
            {
               styleRadios.style[3].disabled="disabled";
            }
         }

         function DisposeMap()
         {
            if(map != null)
            {
              map.Dispose();
            }
         }
      </script>
   </head>
   <body onload="GetMap();" onunload="DisposeMap();" style="font-family:Arial">
      <div id='myMap' style="position: relative; width: 400px; height: 400px;">
      </div>
      <input id="btnLoad" type="button" onclick="GetMap()" value="Load A Map" />
      <br />
      Lat: <input id="txtLat" value="36.13371559517861" />
      <br />
      Lon: <input id="txtLong" value="-115.16238212585449" />
      <br />
      Zoom Level (1-19): <input id="txtZoom" value="9" style="width: 50px" />
      <br />
      Fixed: <input id="chkFixed" type="checkbox" /> (check to prevent user interaction)
        <br />
      Show Switch: <input id="chkShowSwitch" type="checkbox" checked="checked"/> 
      (show the map mode switch on the dashboard control)

      <table width="400px">
         <tr>
            <td align="left" width="60%">
               <form id="styleRadios">
                  Road: <input name="style" type="radio" onclick="SetStyle('r')" /> | 
                  Aerial: <input name="style" type="radio" onclick="SetStyle('a')" checked="checked" />
                  <br />
                  Hybrid: <input name="style" type="radio" onclick="SetStyle('h')" /> | 
                  Oblique: <input name="style" type="radio" onclick="SetStyle('o')" disabled="disabled"/>
               </form>
            </td>
            <td align="left">
               <form id="modeRadios">
                  2D: <input name="mode" type="radio" onclick="SetMode()" checked="checked" />
                  <br />
                  3D: <input name="mode" type="radio" onclick="SetMode()" />
               </form>
            </td>
         </tr>
      </table>
   </body>
</html>
Show: