Export (0) Print
Expand All

Loading the AJAX Map Control

Bing

This topic describes how to load the Bing Maps AJAX Control 7.0 into your Web page to display a map. This is the first step you need to take for any page that uses the map control.

Displaying the Default Map

Displaying the default map, which includes all of the navigation functionality, consists of the following steps:

  1. At the top of the HTML page add the following DOCTYPE declaration.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
  2. In the header section of an HTML page, add a META element with the charset attribute set to "utf-8", as follows.

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    Gg427624.note(en-us,MSDN.10).gifNote:
    It is recommended that you use UTF-8 encoding in your web page.

  3. Also in the header section, add a reference to the map control, as follows.

    <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
    </script>
    
    To use SSL, add the s parameter to the reference as shown below.

    <script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1">
    </script>
    
    To display your map in another language that the default en-us (United States English), set the mkt parameter to a supported language as shown below. For a list of supported languages, see Localizing the Map.

    <script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=fr-fr">
    </script>
    
    Gg427624.note(en-us,MSDN.10).gifNote:
    With new features currently in preview, you can show map labels in two languages and show the local language for each location. These preview features are described in Localizing the Map.

  4. In the body of the page, add a DIV element to the page to contain the map. The size of the map is defined by the height and width of the DIV element. The position of the map is set by using the "position", "top", and "left" properties. You can set these values either inline or by defining the values in a style class and then referencing that class, as follows.

    <div id='mapDiv' style="position:absolute; width:400px; height:400px;"></div>
    
    or

    .map {
       position: absolute;
       top: 20;
       left: 10;
       width: 400px;
       height: 400px;
       border:#555555 2px solid;
    }
    ...
    <div id="mapDiv" class="map"></div>
    
    Gg427624.note(en-us,MSDN.10).gifNote:
    If you do not specify a width/height, the width/height of the div is used. For cross-browser compatibility, you should always specify the position attribute (both "absolute" and "relative" are valid values). If you use a percentage width and or height in the map DIV, it is the percentage of the parent width or height, respectively.

    Gg427624.Caution(en-us,MSDN.10).gifCaution:
    The navigation control, map type selector, and breadcrumb may not work properly if you use margin to position the map. Use CSS absolute or relative positioning instead.

  5. Next, within a new script tag, create a function that can be called when your web page loads.

    <script type="text/javascript">
       function GetMap()
       {
       }
    </script>
    
    Modify the body tag so that the GetMap function is called onload.

    <body onload="GetMap();">
    
  6. Finally, create an instance of the Map Class in the GetMap function. You also need to include a map options object to contain your credentials, which is your Bing Maps Key. See the Getting a Bing Maps Key topic.

    <script type="text/javascript">
    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:"Your Bing Maps Key"});
    </script>
    
    

The full code is 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">

         function GetMap()
         {
            var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:"Your Bing Maps Key"});
         }

      </script>
   </head>
   <body onload="GetMap();"> 
      <div id='mapDiv' style="position:absolute; width:400px; height:400px;"></div>
   </body>
</html>

Customizing the Map When Loading

You can also specify other options when the map is first loaded, such as the location, zoom level, and the imagery of the map. To do this, pass in MapOptions or ViewOptions to the Map constructor. The code below sets the imagery to Aerial.

var mapOptions = {
credentials: "Your Bing Maps Key",
mapTypeId: Microsoft.Maps.MapTypeId.aerial
}

var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);

Disposing of the Map when you navigate to another page

If you are displaying a Map on your web page and then navigate to another web page in your application, you must use the dispose() method to dispose of the map.

Example

The following code shows a complete Web page that loads a map. Valid map types are found 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 map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
                           {credentials: "Your Bing Maps Key",
                            center: new Microsoft.Maps.Location(45.5, -122.5),
                            mapTypeId: Microsoft.Maps.MapTypeId.road,
                            zoom: 7});
      }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>       
   </body>
</html>
Show:
© 2014 Microsoft