Displaying a Map Using JavaScript
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.
This topic describes using JavaScript to load the Bing Maps AJAX Control 6.3 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.
Note
If you do not need the full functionality of the Bing Maps AJAX Control 6.3 and just want to display a simple map on your Web page, you can use the embedded map feature of the map control. This is described in the Displaying an Embedded Map topic.
Also note that you can use the core version of the map control to enhance the performance of your map control. See Using the Core Map Control.Displaying the Default Map
Displaying the default map, which includes all of the navigation functionality, consists of the following steps:
At the top of the HTML page add the following DOCTYPE declaration.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">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">Note
It is recommended that you use UTF-8 encoding in your web page.
Also in the header section, add a reference to the map control, as follows.
<script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&mkt=en-us"> </script>Note
More information about using the mkt attribute to set the culture of the map is found in the Returning Localized Results topic.
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='myMap' 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="map" class="map"></div>Note
If you do not specify a width, a default width of 600 pixels is used. The default height is 400 pixels. 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.
Create a new instance of the VEMap Class and call the VEMap.LoadMap Method, as follows.
var map = new VEMap('myMap'); map.LoadMap();Note
In most cases you must call the call LoadMap method before you call a VEMap method or attempt to access a VEMap property. The exceptions, which you must call after creating the new VEMap object but before you call the LoadMap method on that object, are:
Customizing the Map When Loading
You can also specify the location, zoom level, and map style of the map when you first load it. To do this, use the overloaded VEMap.LoadMap Method function as follows to pass in the location, zoom level, map style, whether the map is locked, map mode, whether to show the map mode switch, and how much of a tile buffer to display around the map.
var map = new VEMap('myMap');
map.LoadMap(new VELatLong(47.6, -122.33, 0, VEAltitudeMode.RelativeToGround), 10, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
Example
A complete Web page with all of the elements required to show a map may look like the following.
<!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 LA = new VELatLong(34.0540, -118.2370);
var pinPoint = null;
var pinPixel = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
AddPin();
}
function getInfo()
{
var info;
if (map.IsBirdseyeAvailable())
{
var be = map.GetBirdseyeScene();
info = "ID: " + be.GetID() + "\n";
info += "orientation: " + be.GetOrientation()+ "\n";
info += "height: " + be.GetHeight() + "\n";
info += "width: " + be.GetWidth() + "\n";
var pixel = be.LatLongToPixel(map.GetCenter(), map.GetZoomLevel());
info += "LatLongToPixel: " + pixel.x + ", " + pixel.y + "\n";
// Check to see if the current birdseye view contains the pushpin pixel point.
info += "contains pixel " + pinPixel.x + ", " + pinPixel.y + ": " +
be.ContainsPixel(pinPixel.x, pinPixel.y, map.GetZoomLevel()) + "\n";
// Check to see if the current view contains the pushpin LatLong.
info += "contains latlong " + pinPoint + ": " + be.ContainsLatLong(pinPoint) + "\n";
// This method may return null, depending on the selected view and map style.
info += "latlong: " + map.PixelToLatLong(pixel);
alert(info);
}
else
{
var center = map.GetCenter();
info = "Zoom level:\t" + map.GetZoomLevel() + "\n";
info += "Latitude:\t" + center.Latitude + "\n";
info += "Longitude:\t" + center.Longitude;
alert(info);
}
}
function AddPin()
{
// Add a new pushpin to the center of the map.
pinPoint = map.GetCenter();
pinPixel = map.LatLongToPixel(pinPoint);
map.AddPushpin(pinPoint);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<input id="btnGetInfo" type="button" value="Get Scene Information" name="getinfo" onclick="getInfo();">
<br/>
(zoom out 5 clicks to get latitude/longitude and zoom level)
</body>
</html>