Professional Documents
Culture Documents
Microsoft.Maps.AdvancedSh
apes
Microsoft.Maps.Directions
Microsoft.Maps.Overlays.Style
Microsoft.Maps.Search
Microsoft.Maps.Themes.Bing
Theme
Microsoft.Maps.Traffic
Microsoft.Maps.VenueMaps
moduleLoade
d
moduleLoaded(moduleKey:string) None Signals that the specified module has
been loaded and if specified, calls
the callback function in loadModule.
Call this method at the end of your
module script.
registerModul
e
registerModule(moduleKey:strin
g, scriptUrl:string,
options:{styleURLs})
None Registers a module with the map
control. The name of the module is
specified in moduleKey, the module
176
Name Definition Retur
n
Value
Description
script is defined in scriptUrl, and the
options provides the location of a
*.css file to load with the module.
To minimize possible
conflicts with other custom
modules, choose a unique
module name (defined in
moduleKey). For example,
you can use your company
name in the name of the
module.
Once you have registered a module,
you can make its functionality
available by loading it using
loadModule.
Example
The code below shows how to register and load a module, named MyModule1. The code for
MyModule1 is found in the next code section.
<!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;
177
function myModuleLoaded()
{
alert("myModule has loaded.");
// Use the function provided by the newly loaded module
var myModule = new MyModule(map);
myModule.HelloWorld();
}
function GetMap()
{
// Initialize the map
var options = {credentials: "Bing Maps Key"};
map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), options);
// Register and load a new module
Microsoft.Maps.registerModule("MyModule1",
"http://example.com/mymodule.js");
Microsoft.Maps.loadModule("MyModule1", { callback: myModuleLoaded });
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
// mymodule.js
178
function MyModule(map)
{
this.HelloWorld = function()
{
alert("Hello World - map Center is " + map.getCenter().toString());
}
}
Microsoft.Maps.moduleLoaded('MyModule1');
See Also
Building Your Own Module
MouseEventArgs Object
Contains the arguments for mouse events.
Properties
Name Type Description
eventName string The event that occurred.
handled boolean A boolean indicating whether
the event is handled. If this
property is set to true, the
default map control behavior
for the event is cancelled.
isPrimary boolean A boolean indicating if the
primary button (such as the left
mouse button or a tap on a
touch screen) was used.
isSecondary boolean A boolean indicating if the
secondary mouse button (such
as the right mouse button) was
used.
isTouchEvent boolean A boolean indicating whether
the event that occurred was a
179
Name Type Description
touch event.
originalEvent object The original browser event.
pageX number The x-value of the pixel
coordinate on the page of the
mouse cursor.
pageY number The y-value of the pixel
coordinate on the page of the
mouse cursor.
target object The object that fired the event.
targetType string The type of the object that fired
the event. Valid values include
the following: map, polygon,
polyline, or pushpin
wheelDelta number The number of units that the
mouse wheel has changed.
Methods
Name Definition Return Value Description
getX getX() number Returns the x-value of
the pixel coordinate,
relative to the map, of
the mouse.
getY getY() number Returns the y-value of
the pixel coordinate,
relative to the map, of
the mouse.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
180
<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()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
{credentials:"Bing Maps Key"});
//Add handler for the map click event.
Microsoft.Maps.Events.addHandler(map, 'click', displayEventInfo);
}
function displayEventInfo(e) {
if (e.targetType == "map") {
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var loc = e.target.tryPixelToLocation(point);
document.getElementById("textBox").value = loc.latitude + ", " +
loc.longitude;
}
}
</script>
</head>
<body onload="GetMap();">
181
<div id='myMap' style="position:relative; width:400px; height:400px;"></div><br>
<b>Click the map to display the coordinate values at that point.</b><br>
Latitude, Longitude:
<input id='textBox' type="text" style="width:250px;"/>
</body>
</html>
PixelReference Enumeration
Contains constants used to show how pixels are defined.
Constants
Name Description
control The pixel is defined relative to the map controls
root element, where the top left corner of the
map control is (0, 0). Using this option might
cause a page reflow which may negatively
impact performance.
page The pixel is defined relative to the page, where
the top left corner of the HTML page is (0, 0).
This option is best used when working with
mouse or touch events. Using this option might
cause a page reflow which may negatively
impact performance.
viewport The pixel is defined in viewport coordinates,
relative to the center of the map, where the
center of the map is (0, 0). This option is best
used for positioning geo-aligned entities added
to the user layer.
Methods
Name Definition Return Value Description
isValid isValid(reference:PixelReference) boolean Determines whether
the specified
182
Name Definition Return Value Description
reference is a
supported
PixelReference.
Example
<!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()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
{credentials:"Bing Maps Key"});
// Add handler for the map click event.
Microsoft.Maps.Events.addHandler(map, 'click', displayEventInfo);
}
function displayEventInfo(e) {
183
if (e.targetType == "map") {
var point = new Microsoft.Maps.Point(e.pageX, e.pageY,
Microsoft.Maps.PixelReference.page);
var loc = e.target.tryPixelToLocation(point,
Microsoft.Maps.PixelReference.page);
if (loc!=null)
{
alert("The location " + loc.latitude + ", " + loc.longitude + " was
clicked.");
}
}
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div><br>
<b>Click the map to display the coordinate values at that point.</b><br>
</body>
</html>
Point Class
Represents a point on the map.
Constructor
Name Definition Description
Point Point(x:number, y:number) Initializes a new instance of
184
Name Definition Description
the Point class.
Properties
Name Type Description
x number The x value of the coordinate.
y number The y-value of the coordinate.
Static Methods
Name Definition Return Value Description
areEqual areEqual(point1:Point,
point2:Point)
boolean Determines if the
specified points are
equal.
clone clone(Point) Point Returns a copy of the
Point object.
Methods
Name Definition Return Value Description
clone clone() Point Returns a copy of the
Point object.
toString toString() string Converts the Point
object into a string.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
185
<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()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
{credentials:"Bing Maps Key "});
// Add handler for the map click event.
Microsoft.Maps.Events.addHandler(map, 'click', displayEventInfo);
}
function displayEventInfo(e) {
if (e.targetType == "map") {
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var loc = e.target.tryPixelToLocation(point);
if (loc!=null)
{
alert("The location " + loc.latitude + ", " + loc.longitude + " was
clicked.");
}
186
}
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div><br>
<b>Click the map to display the coordinate values at that point.</b><br>
</body>
</html>
Polygon Class
Represents a polygon on the map.
Constructor
Name Definition Description
Polygon Polygon(locations:Location[],
options?:PolygonOptions)
Initializes a new instance of
the Polygon class.
Methods
Name Definition Return Value Description
getFillColor getFillColor() Color Returns the
color of the
inside of the
polygon.
getLocations getLocations() Location[] Returns the
locations that
define the
corners of the
polygon.
getStrokeColor getStrokeColor() Color Returns the
187
Name Definition Return Value Description
color of the
outline of the
polygon.
getStrokeDashArray getStrokeDashArray() string Returns the
string that
represents the
stroke/gap
sequence
used to draw
the outline of
the polygon.
getStrokeThickness getStrokeThickness() number Returns the
thickness of
the outline of
the polygon.
getVisible getVisible() boolean Returns
whether the
polygon is
visible. A
value of false
indicates that
the polygon is
hidden,
although it is
still an entity
on the map.
setLocations setLocations(locations:Location[]) None Sets the
locations that
define the
corners of the
polygon.
setOptions setOptions(options:PolygonOptions) None Sets options
for the
polygon.
toString toString() string Converts the
Polygon object
to a string.
188
Events
Name Arguments Description
click eventArgs:MouseEventArgs Occurs when the mouse is
used to click the polygon.
dblclick eventArgs:MouseEventArgs Occurs when the mouse is
used to double click the
polygon.
entitychanged object: {entity:Entity} Occurs when the location
of the polygon or any of
the polygons options
change.
mousedown eventArgs:MouseEventArgs Occurs when the left
mouse button is pressed
when the mouse is over
the polygon.
mouseout eventArgs:MouseEventArgs Occurs when the mouse
cursor moves out of the
area covered by the
polygon.
mouseover eventArgs:MouseEventArgs Occurs when the mouse is
over the polygon.
mouseup eventArgs:MouseEventArgs Occurs when the left
mouse button is lifted up
when the mouse is over
the polygon.
rightclick eventArgs:MouseEventArgs Occurs when the right
mouse button is used to
click the polygon.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
189
<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()
{
// Initialize the map
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials:"Bing Maps Key"});
// Create the locations
var location1 = new Microsoft.Maps.Location(20,-20);
var location2 = new Microsoft.Maps.Location(20,20);
var location3 = new Microsoft.Maps.Location(-20,20);
var location4 = new Microsoft.Maps.Location(-20,-20);
// Create a polygon
var vertices = new Array(location1, location2, location3, location4,
location1);
var polygoncolor = new Microsoft.Maps.Color(100,100,0,100);
var polygon = new Microsoft.Maps.Polygon(vertices,{fillColor: polygoncolor,
strokeColor: polygoncolor});
// Add the shape to the map
map.entities.push(polygon)
// Set the view
map.setView({bounds: Microsoft.Maps.LocationRect.fromLocations(vertices)});
}
190
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
PolygonOptions Object
Represents the options for a polygon.
Properties
Name Type Description
fillColor Color The color of the inside of the polygon.
infobox Infobox The info box associated with this
polygon. If an info box is assigned and
the Microsoft.Maps.Themes.BingTheme
module is loaded, then the info box
appears when the hover or click events
of the polygon occur.
strokeColor Color The color of the outline of the polygon.
strokeDashArray string A string representing the stroke/gap
sequence to use to draw the outline of
the polygon. The string must be in the
format S, G, S*, G*, where S represents
the stroke length and G represents gap
length. Stroke lengths and gap lengths
can be separated by commas or spaces.
For example, a stroke dash string of 1 4
2 1 would draw the polygon outline with
a dash, four spaces, two dashes, one
space, and then repeated.
strokeThickness number The thickness of the outline of the
polygon.
191
Name Type Description
visible boolean A boolean indicating whether to show or
hide the polygon. A value of false
indicates that the polygon is hidden,
although it is still an entity on the map.
Example
<!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()
{
// Initialize the map
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials:"Bing Maps Key"});
// Create the locations
var location1 = new Microsoft.Maps.Location(20,-20);
var location2 = new Microsoft.Maps.Location(20,20);
var location3 = new Microsoft.Maps.Location(-20,20);
var location4 = new Microsoft.Maps.Location(-20,-20);
// Create a polygon
192
var vertices = new Array(location1, location2, location3, location4,
location1);
var polygon = new Microsoft.Maps.Polygon(vertices,
{fillColor: new Microsoft.Maps.Color(100,100,0,100),
strokeColor: new Microsoft.Maps.Color(200,0,100,100),
strokeThickness: 5});
// Add the shape to the map
map.entities.push(polygon)
// Set the view
map.setView({bounds: Microsoft.Maps.LocationRect.fromLocations(vertices)});
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
Polyline Class
Represents a polyline on the map.
Constructor
Name Definition Description
Polyline Polyline(locations:Location[],
options?:PolylineOptions)
Initializes a new instance of
the Polyline class.
193
Methods
Name Definition Return Value Description
getLocations getLocations() Location[] Returns the
locations that
define the
polyline.
getStrokeColor getStrokeColor() Color Returns the
color of the
polyline.
getStrokeDashArray getStrokeDashArray() string Returns the
string that
represents the
stroke/gap
sequence
used to draw
the polyline.
getStrokeThickness getStrokeThickness() number Returns the
thickness of
the polyline.
getVisible getVisible() boolean Returns
whether the
polyline is
visible. A
value of false
indicates that
the polyline is
hidden,
although it is
still an entity
on the map.
setLocations setLocations(locations:Location[]) None Sets the
locations that
define the
polyline.
setOptions setOptions(options:PolylineOptions) None Sets options
for the
polyline.
194
Name Definition Return Value Description
toString toString() string Converts the
Polyline object
to a string.
Events
Name Arguments Description
click eventArgs:MouseEventArgs Occurs when the mouse is
used to click the polyline.
dblclick eventArgs:MouseEventArgs Occurs when the mouse is
used to double click the
polyline.
entitychanged object: {entity:Entity} Occurs when the location
of the polyline or any of the
polylines options change.
mousedown eventArgs:MouseEventArgs Occurs when the left
mouse button is pressed
when the mouse is over
the polyline.
mouseout eventArgs:MouseEventArgs Occurs when the mouse
cursor moves out of the
area covered by the
polyline.
mouseover eventArgs:MouseEventArgs Occurs when the mouse is
over the polyline.
mouseup eventArgs:MouseEventArgs Occurs when the left
mouse button is lifted up
when the mouse is over
the polyline.
rightclick eventArgs:MouseEventArgs Occurs when the right
mouse button is used to
click the polyline.
195
Example
<!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()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key"});
// Create the locations
var location1 = new Microsoft.Maps.Location(-20,-20);
var location2 = new Microsoft.Maps.Location(20,-20);
var location3 = new Microsoft.Maps.Location(20,20);
var location4 = new Microsoft.Maps.Location(60, 20);
var location5 = new Microsoft.Maps.Location(60, 60);
// Create a polyline
var lineVertices = new Array(location1, location2, location3, location4,
location5);
var line = new Microsoft.Maps.Polyline(lineVertices);
196
// Add the polyline to the map
map.entities.push(line);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
PolylineOptions Object
Represents the options for a polyline.
Properties
Name Type Description
strokeColor Color The color of the polyline.
strokeDashArray string A string representing the
stroke/gap sequence to use to
draw the polyline. The string
must be in the format S, G, S*,
G*, where S represents the
stroke length and G represents
gap length. Stroke lengths and
gap lengths can be separated
by commas or spaces. For
example, a stroke dash string
of 1 4 2 1 would draw the
polyline with a dash, four
spaces, two dashes, one
space, and then repeated.
197
Name Type Description
strokeThickness number The thickness of the polyline.
visible boolean A boolean indicating whether
to show or hide the polyline. A
value of false indicates that
the polyline is hidden, although
it is still an entity on the map.
Example
<!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()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key"});
// Create the locations
var location1 = new Microsoft.Maps.Location(-20,-20);
var location2 = new Microsoft.Maps.Location(20,-20);
var location3 = new Microsoft.Maps.Location(20,20);
198
var location4 = new Microsoft.Maps.Location(60, 20);
var location5 = new Microsoft.Maps.Location(60, 60);
// Create a polyline
var lineVertices = new Array(location1, location2, location3, location4,
location5);
var line = new Microsoft.Maps.Polyline(lineVertices,{strokeColor:new
Microsoft.Maps.Color(200, 100, 0, 100), strokeThickness:5, strokeDashArray:"5 2"});
// Add the polyline to the map
map.entities.push(line);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
Position Class
Represents the position of a user on a map.
Properties
Name Type Description
coords Coordinates The position as a W3C
Coordinates object.
timestamp string The time when the position was
determined, in the form of a
199
Name Type Description
DOMTimeStamp.
See Also
GeoLocationProvider Class
PositionCircleOptions Object
Contains options for the addAccuracyCircle method of the GeoLocationProvider class.
Properties
Name Type Description
polygonOptions PolygonOptions The polygon options for the
geo location accuracy circle.
showOnMap boolean A boolean indicating whether
to display the geo location
accuracy circle. The default
value is true. If this property
is set to false, a geo location
accuracy circle is not drawn
and any existing accuracy
circles are removed.
Example
<!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>
200
<script type="text/javascript">
var map;
var geoLocationProvider;
function GetMap()
{
// Set the map options
var mapOptions = {credentials:"Bing Maps Key"};
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
// Initialize the location provider
geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
// Get the user's current location
geoLocationProvider.getCurrentPosition({successCallback:drawCircle,
showAccuracyCircle:false});
}
function drawCircle(args)
{
// Draw the accuracy circle using a different color
geoLocationProvider.addAccuracyCircle(args.center, 50000, 50000,
{polygonOptions:{fillColor:new Microsoft.Maps.Color(100,100,0,100), strokeColor:new
Microsoft.Maps.Color(100,100,0,100)}});
}
201
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
PositionError Class
Represents the error when a user position request does not succeed.
Properties
Name Type Description
errorCode number The error code.
Any one of the following error
codes may be returned:
0 An error occurred that is
not covered by other error
codes.
1 The application does not
have permission to use the
GeoLocation API.
2 The position of the host
device could not be
determined.
3 The specified timeout
was exceeded.
internalError string The error message. This
message is for the developer
and is not intended to be
displayed to the end user.
202
See Also
GeoLocationProvider Class
PositionOptions Object
Contains options for the getCurrentPosition method of the GeoLocationProvider class.
Properties
Name Type Description
enableHighAccuracy boolean A boolean indicating whether
only a high accuracy result
should be retrieved. The
default value is false. Setting
this property to true may
result in a slower response
time.
errorCallback function The function to call when an
error occurs during the user
location request. The callback
function must accept one
argument. The argument
object contains two properties,
internalError, a PositionError
type, and errorCode, a
number.
Any one of the following
errorCode values may be
returned:
1 The application origin
does not have permission
to use the GeoLocation
API.
2 The position of the user
could not be determined
because of a device
failure.
3 The time specified in
timeout has been
203
Name Type Description
exceeded.
4 A request is already in
process.
5 The users browser
does not support geo
location.
maximumAge number A number indicating the
acceptable age, in
milliseconds, of a cached geo
location result to return. The
default value is 0, which
indicates a new (not cached)
result will be retrieved.
showAccuracyCircle boolean A boolean indicating whether
to display the polygon on the
map that shows the accuracy
of the returned geo location.
The default value is true.
successCallback function The function to call when the
users location was
successfully retrieved. The
callback function must accept
one argument. The argument
object contains two properties,
center, a Location type, and
position, a Position type.
timeout number The length of time, in
milliseconds, to allow for the
geo location request to return.
By default there is no timeout.
updateMapView boolean A boolean indicating whether
to update the map view with
the best view of the users
location (if the request is
successful). The default value
is true.
204
Example
<!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;
function GetMap()
{
// Set the map options
var mapOptions = {credentials:"Bing Maps Key"};
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
// Initialize the location provider
var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
// Get the user's current location
geoLocationProvider.getCurrentPosition({successCallback:displayCenter});
}
205
function displayCenter(args)
{
// Display the user location when the geo location request returns
alert("The user's location is " + args.center);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
Pushpin Class
Defines a pushpin on the map.
Constructor
Name Definition Description
Pushpin Pushpin(location:Location,
options?:PushpinOptions)
Initializes a new instance of
the Pushpin class.
Methods
Name Definition Return Value Description
getAnchor getAnchor() Point Returns the
point on the
pushpin icon
which is
anchored to the
pushpin location.
An anchor of
(0,0) is the top
206
Name Definition Return Value Description
left corner of the
icon.
getIcon getIcon() string Returns the
pushpin icon.
getHeight getHeight() number Returns the
height of the
pushpin, which
is the height of
the pushpin icon.
getLocation getLocation() Location Returns the
location of the
pushpin.
getText getText() string Returns the text
associated with
the pushpin.
getTextOffset getTextOffset() Point Returns the
amount the text
is shifted from
the pushpin icon.
getTypeName getTypeName() string Returns the type
of the pushpin.
getVisible getVisible() boolean Returns whether
the pushpin is
visible. A value
of false
indicates that the
pushpin is
hidden, although
it is still an entity
on the map.
getWidth getWidth() number Returns the
width of the
pushpin, which
is the width of
the pushpin icon.
getZIndex getZIndex() number Returns the z-
index of the
207
Name Definition Return Value Description
pushpin with
respect to other
items on the
map.
setLocation setLocation(location:Location) None Sets the location
of the pushpin.
setOptions setOptions(options:PushpinOptions) None Sets options for
the pushpin.
toString toString() string Converts the
Pushpin object
to a string.
Events
Name Arguments Description
click eventArgs:MouseEventArgs Occurs when the mouse is
used to click the pushpin.
dblclick eventArgs:MouseEventArgs Occurs when the mouse is
used to double click the
pushpin.
drag object: {entity:Pushpin} Occurs when the pushpin
is being dragged.
dragend eventArgs:MouseEventArgs Occurs when the pushpin
stops being dragged.
dragstart eventArgs:MouseEventArgs Occurs when the pushpin
starts being dragged.
entitychanged object: {entity:Entity} Occurs when the location
of the pushpin or any of
the pushpins options
change.
mousedown eventArgs:MouseEventArgs Occurs when the left
mouse button is pressed
when the mouse is over
the pushpin.
208
Name Arguments Description
mouseout eventArgs:MouseEventArgs Occurs when the mouse
cursor moves out of the
area covered by the
pushpin.
mouseover eventArgs:MouseEventArgs Occurs when the mouse is
over the pushpin.
mouseup eventArgs:MouseEventArgs Occurs when the left
mouse button is lifted up
when the mouse is over
the pushpin.
rightclick eventArgs:MouseEventArgs Occurs when the right
mouse button is used to
click the pushpin.
Example
<!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()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
209
{credentials:"Bing Maps Key"});
// Retrieve the location of the map center
var center = map.getCenter();
// Add a pin to the center of the map
var pin = new Microsoft.Maps.Pushpin(center, {draggable: true});
// Add a handler to the pushpin drag
Microsoft.Maps.Events.addHandler(pin, 'mouseup', DisplayLoc);
map.entities.push(pin);
}
function DisplayLoc(e){
if (e.targetType == 'pushpin'){
var pinLoc = e.target.getLocation();
alert("The location of the pushpin is now " + pinLoc.latitude + ", " +
pinLoc.longitude);
}
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<b>Drag the pushpin to a new location.</b>
</body>
</html>
210
PushpinOptions Object
Represents the options for a pushpin.
Properties
Name Type Description
anchor Point The point on the pushpin icon which is
anchored to the pushpin location. An
anchor of (0,0) is the top left corner of
the icon. The default anchor is the
bottom center of the icon.
draggable boolean A boolean indicating whether the
pushpin can be dragged to a new
position with the mouse.
height number The height of the pushpin, which is the
height of the pushpin icon. The default
value is 39.
htmlContent string The HTML that represents the pushpin.
icon string The path of the image to use as the
pushpin icon.
infobox Infobox The info box associated with this
pushpin. If the
Microsoft.Maps.Themes.BingTheme
module is loaded, then the info box
appears when the hover or click events
of the pushpin occur.
state EntityState The state of the pushpin, such as
highlighted or selected. To get the latest
pushpin state design, load the
Microsoft.Maps.Themes.BingTheme
module before creating the pushpin.
text string The text associated with the pushpin.
textOffset Point The amount the text is shifted from the
pushpin icon. The default value is (0,5).
typeName string The type of the pushpin, as a string. The
pushpin DOM (document object model)
211
Name Type Description
node created for the pushpin will have
the specified typeName. A standard
pushpin type is used unless the
Microsoft.Maps.Themes.BingTheme
module is loaded, in which case
typeName can be set to micro to use
the micro pushpin type.
visible boolean A boolean indicating whether to show or
hide the pushpin. The default value is
true. A value of false indicates that the
pushpin is hidden, although it is still an
entity on the map.
width number The width of the pushpin, which is the
width of the pushpin icon. The default
value is 25.
zIndex number The z-index of the pushpin with respect
to other items on the map.
Example
This example uses the image below, named BluePushpin.png, as the pushpin icon.
<!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">
212
var map = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
{credentials:"Bing Maps Key"});
// Retrieve the location of the map center
var center = map.getCenter();
// Add a pin to the center of the map
var pin = new Microsoft.Maps.Pushpin(center, {icon:"BluePushpin.png",
height:50, width:50, anchor:new
Microsoft.Maps.Point(0,50), draggable: true});
map.entities.push(pin);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
TileLayer Class
Represents a tile layer.
213
Constructor
Name Definition Description
TileLayer TileLayer(options:TileLayerOptions) Initializes a new instance
of the TileLayer class.
Methods
Name Definition Return
Type
Description
getOpacity getOpacity() number Returns the opacity of the
tile layer, defined as a
double between 0 (not
visible) and 1.
getTileSourc
e
getTileSource(projection:string) TileSourc
e
Returns the tile source of
the tile layer.
The projection parameter
accepts the following
values: mercator,
enhancedBirdseyeNorthUp,
enhancedBirdseyeSouthUp
,
enhancedBirdseyeEastUp,
enhancedBirdseyeWestUp
getVisible getVisible( boolean Returns whether the tile
layer is visible. A value of
false indicates that the tile
layer is hidden.
getZIndex getZIndex() number Returns the z-index of the
tile layer with respect to
other items on the map.
setOptions setOptions(options:TileLayerOptions
)
None Sets options for the tile
layer.
toString toString() string Converts the TileLayer
object to a string.
214
Events
Name Arguments Description
tiledownloadcomplete None Occurs when all the tiles of
the tile layer have loaded.
Example
<!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()
{
// Initialize the map
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials:"Bing Maps Key", center:new Microsoft.Maps.Location(48.03,-
122.4), zoom:12, mapTypeId: Microsoft.Maps.MapTypeId.road });
try
{
// Create the tile layer source
var tileSource = new Microsoft.Maps.TileSource({uriConstructor:
'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png'});
// Construct the layer using the tile source
215
var tilelayer= new Microsoft.Maps.TileLayer({ mercator: tileSource,
opacity: .7 });
// Push the tile layer to the map
map.entities.push(tilelayer);
}
catch(err)
{
alert( 'Error Message:' + err.message);
}
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
See Also
Working with Tile Layers
TileLayerOptions Object
Defines the options for a tile layer.
Properties
216
Name Type Description
animationDisplay AnimationVisibility The tile layers visibility
during animation. You can
use this property to prevent
overlays from displaying
during animations, which can
impact performance. The
default value is auto.
downloadTimeout number The number of milliseconds
allowed for the tile layer
image download. If the
timeout occurs before the
image is fully downloaded,
the map control considers
the download a failure. The
default value is 10000.
mercator TileSource The tile source for the tile
layer.
opacity number The opacity of the tile layer,
defined by a number
between 0 (not visible) and
1.
visible boolean A boolean indicating whether
to show or hide the tile layer.
The default value is true. A
value of false indicates that
the tile layer is hidden,
although it is still an entity on
the map.
zIndex number The z-index of the tile layer,
with respect to other items
on the map.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
217
<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;
var tilelayer = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials:"Bing Maps Key", center:new Microsoft.Maps.Location(48.03,-122.4), zoom:12,
mapTypeId: Microsoft.Maps.MapTypeId.road });
try
{
// Create the tile layer source
var tileSource = new Microsoft.Maps.TileSource({uriConstructor:
'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png'});
// Construct the layer using the tile source
tilelayer= new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity:
.7 });
// Push the tile layer to the map
map.entities.push(tilelayer);
}
catch(err)
218
{
alert( 'Error Message:' + err.message);
}
}
function SetOpacity()
{
var opacityVal = parseFloat(document.getElementById("txtOpacity").value);
if ((opacityVal > 1) || (opacityVal < 0))
{
alert("The opacity value must be between 0 and 1.");
}
else
{
tilelayer.setOptions({opacity: opacityVal});
}
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<input id="txtOpacity" type="text" value=".1" style="width:25px;"/>
<input type="button" value="Set Opacity" onclick="SetOpacity();"/>
</body>
</html>
219
See Also
Working with Tile Layers
TileSource Class
Defines a tile source for a tile layer.
Constructor
Name Definition Description
TileSource TileSource(options:TileSourceOptions) Initializes a new instance
of the TileSource class.
Methods
Name Definition Return Type Description
getHeight getHeight() Number Returns the pixel
height of each tile in
the tile source.
getUriConstructor getUriConstructor() string Returns a string
that constructs tile
URLs used to
retrieve tiles for the
tile layer.
getWidth getWidth() number Returns the pixel
width of each tile in
the tile source.
toString toString() string Converts the
TileSource object to
a string.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
220
<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()
{
// Initialize the map
var map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key",
center:new Microsoft.Maps.Location(48.03,-122.4), zoom:12, mapTypeId:
Microsoft.Maps.MapTypeId.road });
try
{
// Create the tile layer source
var tileSource = new Microsoft.Maps.TileSource({uriConstructor:
'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png'});
// Construct the layer using the tile source
var tilelayer= new Microsoft.Maps.TileLayer({ mercator: tileSource,
opacity: .7 });
// Push the tile layer to the map
map.entities.push(tilelayer);
}
catch(err)
{
alert( 'Error Message:' + err.message);
221
}
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
See Also
Working with Tile Layers
TileSourceOptions Object
Defines options for a tile source.
Properties
Name Type Description
height number The pixel height of each tile in
the tile source. The default
value is 256.
The specified height needs to
be a multiplier of 2 of the
current projections tile height
for the tiles to be shown. For
example, since Mercator tile
source tiles are 256x256, this
projection supports tiles that
are 64x64, 128x128, 256x256,
512x512, or any combination of
these.
222
Name Type Description
uriConstructor string The string that constructs the
URLs used to retrieve tiles from
the tile source. This property is
required.
The uriConstructor will replace
{subdomain} and {quadkey}.
You can also set this to a
callback function that receives
a tile URL with location (x,y)
and zoom level properties. This
is useful when you want to use
tiles with x/y/zoom URL
structure, or if you are
connecting to a Web Map
Service (WMS) and need to
pass the tile bounding box in
the URL. For an example, see
the Example section below.
width number The pixel width of each tile in
the tile source. The default
value is 256.
The specified width needs to be
a multiplier of 2 of the current
projections tile width for the
tiles to be shown. For example,
since Mercator tile source tiles
are 256x256, this projection
supports tiles that are 64x64,
128x128, 256x256, 512x512, or
any combination of these.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
223
<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()
{
// Initialize the map
var map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key",
center:new Microsoft.Maps.Location(48.03,-122.4), zoom:12, mapTypeId:
Microsoft.Maps.MapTypeId.road });
try
{
// Create the tile layer source
var tileSource = new Microsoft.Maps.TileSource({uriConstructor:
'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png'});
// Construct the layer using the tile source
var tilelayer= new Microsoft.Maps.TileLayer({ mercator: tileSource,
opacity: .7 });
// Push the tile layer to the map
map.entities.push(tilelayer);
}
catch(err)
{
alert( 'Error Message:' + err.message);
}
}
224
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
The following example shows how to use a callback function with the URI constructor.
//Create a tile layer source
var tileSource = new Microsoft.Maps.TileSource({ uriConstructor: getTilePath });
function getTilePath(tile)
{
//Tile Format http://tile.contoso.org/hiking/{z}/{x}/{y}.png
return 'http://tile.contoso.com/hiking/' + tile.levelOfDetail + '/' + tile.x + '/' +
tile.y + '.png';
}
See Also
Working with Tile Layers
ViewOptions Object
Contains options for the map view.
Properties
Name Type Description
animate boolean A boolean that specifies
whether to animate map
navigation. Note that this option
is associated with each
setView call and defaults to
225
Name Type Description
true if not specified.
bounds LocationRect The bounding rectangle of the
map view. If both are specified,
bounds takes precedence over
center.
center Location The location of the center of
the map view. If both are
specified, bounds takes
precedence over center.
centerOffset Point The amount the center is
shifted. This property is ignored
if center is not specified.
heading number The directional heading of the
map. The heading is
represented in geometric
degrees with 0 or 360 = North,
90 = East, 180 = South, and
270 = West.
labelOverlay LabelOverlay A constant indicating how map
labels are displayed.
mapTypeId string The map type of the view. Valid
map types are found in the
MapTypeId Enumeration topic.
padding number The amount of padding to be
added to each side of the
bounds of the map view.
zoom number The zoom level of the map
view.
For information about map
scale and resolution with
respect to zoom level, see
Understanding Scale and
Resolution.
226
Remarks
To 'lock' the map in a certain position, disable mouse and keyboard events during the application
session. The following code disables mouse events.
// Attach an event handler for a mousemove event.
Microsoft.Maps.Events.addHandler(map, "mousemove", cancelEvent);
// When the mouse is used, the cancelEvent function will
// get called. Setting the handled property to true will
// disable the mousemove event, which disables panning.
function cancelEvent(e)
{
e.handled = true;
}
Example
<!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()
{
// Set the initial map and view settings
227
var initialViewBounds = Microsoft.Maps.LocationRect.fromCorners(new
Microsoft.Maps.Location(43,-123), new Microsoft.Maps.Location(33,-113));
var options = {credentials:"Bing Maps Key", width: 500, height: 500, bounds:
initialViewBounds, mapTypeId:Microsoft.Maps.MapTypeId.aerial, animate: false};
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),options);
}
function SetZoom()
{
// Retrieve the zoom level set by the user - converting it to a number.
var zoomLevel = parseInt(document.getElementById("txtZoom").value);
// Get the existing options.
var options = map.getOptions();
// Set the zoom level of the map
options.zoom = zoomLevel;
map.setView(options);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative;"></div>
<input id="txtZoom" type="text" value="1"/>
<input type="button" value="Set Zoom" onclick="SetZoom();"/>
</body>
</html>
228
Microsoft.Maps.AdvancedShapes API
Reference
This section contains reference documentation for the Microsoft.Maps.AdvancedShapes API,
which contains types that allow you to draw complex shapes on your Bing Maps AJAX Control
7.0 map.
Before you can access the types found in the Microsoft.Maps.AdvancedShapes API, you
must first load this module using the loadModule method. Information about loading
modules is in the Module Loading Methods topic.
In This Section
EntityCollection Class
Polygon Class
EntityCollection Class (AdvancedShapes)
Contains a collection of entities. These collection of entities can represent a multiple shape entity
on the map. When the Microsoft.Maps.AdvancedShapes module is loaded, this class inherits and
replaces the basic EntityCollection class.
An Entity can be any one of the following types: Infobox, Polygon, Polyline, Pushpin, TileLayer, or
EntityCollection.
Constructor
Name Definition Description
EntityCollection EntityCollection(options?:EntityCollectionOptions) Initializes a new
instance of the
EntityCollection
class.
Methods
229
Name Definition Return
Value
Description
clear clear() None Removes all
entities from the
collection.
get get(index:number) Entity* Returns the entity
at the specified
index in the
collection.
getLength getLength() number Returns the
number of entities
in the collection.
getVisible getVisible() boolean Returns whether
the entity
collection is visible
on the map.
getZIndex getZIndex() number Gets the z-index
of the entity
collection with
respect to other
items on the map.
indexOf indexOf(entity:Entity*) number Returns the index
of the specified
entity in the
collection. If the
entity is not found
in the collection, -1
is returned.
insert insert(entity:Entity*, index:number) None Inserts the
specified entity
into the collection
at the given index.
pop pop() Entity* Removes the last
entity from the
collection and
returns it.
push push(entity:Entity*) None Adds the specified
entity to the last
position in the
230
Name Definition Return
Value
Description
collection.
remove remove(entity:Entity*) Entity* Removes the
specified entity
from the collection
and returns it.
removeAt removeAt(index:number) Entity* Removes the
entity at the
specified index
from the collection
and returns it.
setOptions setOptions(options:EntityCollectionOptions) None Sets the options
for the entity
collection.
toString toString() string Converts the
EntityCollection
object to a string.
* An Entity can be any one of the following types: Infobox, Polygon, Polyline, Pushpin, TileLayer,
or EntityCollection.
Events
Name Arguments Description
entityadded object: {collection:
EntityCollection, entity:Entity*}
Occurs when one of the
following happens:
An entity is added to the
collection.
One of the entities of the
collection (such as another
entity collection) fires the
entityadded event.
For example, if collection #1
contains an entity, which is
another collection #2, then
when an entity is added to
collection #2, two entityadded
events are fired.
231
Name Arguments Description
entitychanged object: {collection:
EntityCollection, entity:Entity*}
Occurs when one of the
following happens:
The collection changes.
An entity of the
collection changes.
One of the entities of the
collection (such as another
entity collection) fires the
entitychanged event.
For example, if collection #1
contains an entity, which is
another collection #2, then
when an entity of collection #2
changes, two entitychanged
events are fired.
entityremoved object: {collection:
EntityCollection, entity:Entity*}
Occurs when one of the
following happens:
An entity of the
collection is removed.
One of the entities of the
collection (such as another
entity collection) fires the
entityremoved event.
For example, if collection #1
contains an entity, which is
another collection #2, then
when an entity of collection #2
is removed, two
entityremoved events are
fired.
* An Entity can be any one of the following types: Infobox, Polygon, Polyline, Pushpin, TileLayer,
or EntityCollection.
Remarks
The AdvancedShapes EntityCollection class differs from the base EntityCollection class in two
ways:
232
When an entity of the collection fires an event, the event will fire for all entities of the
collection. For example, if the mouseover event if fired for a pushpin in an entity collection,
then the entity collections mouseover event is fired.
Setting the options of the entity collection sets the options of all its entities unless the entity
collection option bubble is set to false. For example, by default, in an entity collection
composed of multiple polygons, setting one polygons fill color to red changes the fill color of
all of the other polygons in the entity collection to red.
Polygon Class (AdvancedShapes)
Represents a complex polygon on the map. When the Microsoft.Maps.AdvancedShapes module
is loaded, this class replaces the basic Polygon Class.
Constructor
Name Definition Description
Polygon Polygon(locationsArrays:[Location[]],
options?:PolygonOptions)
Initializes a new instance of
a complex Polygon. The
locationsArrays array
represents the polygon
rings, where each element
of the array is an array of
Location objects that
defines a ring. This
constructor can be used to
create a normal polygon, a
multi-polygon, a polygon
with holes, or a combination
of polygons.
Methods
Name Definition Return Value Description
getFillColor getFillColor() Color Returns the
color of the
inside of the
polygon.
getLocations getLocations() Location[] Returns the
233
Name Definition Return Value Description
location array
that defines
the first ring of
the polygon.
getRings getRings() [ Location[] ] Returns an
array of
location
arrays, where
each location
array defines
a ring of the
polygon.
getStrokeColor getStrokeColor() Color Returns the
color of the
outline of the
polygon.
getStrokeDashArray getStrokeDashArray() string Returns the
string that
represents the
stroke/gap
sequence
used to draw
the outline of
the polygon.
getStrokeThickness getStrokeThickness() number Returns the
thickness of
the outline of
the polygon.
getVisible getVisible() boolean Returns
whether the
polygon is
visible. A
value of false
indicates that
the polygon is
hidden,
although it is
still an entity
on the map.
234
Name Definition Return Value Description
setLocations setLocations(locations:Location[]) None Sets the
locations that
define a basic
polygon.
setOptions setOptions(options:PolygonOptions) None Sets options
for the
polygon.
setRings setRings(locationArrays:[ Location[]
])
None Sets an array
of location
arrays, where
each location
array defines
a ring of the
polygon.
toString toString() string Converts the
Polygon object
to a string.
Events
Name Arguments Description
click eventArgs:MouseEventArgs Occurs when the mouse is
used to click the polygon.
dblclick eventArgs:MouseEventArgs Occurs when the mouse is
used to double click the
polygon.
entitychanged object: {entity:Entity} Occurs when the location
of the polygon or any of
the polygons options
change.
mousedown eventArgs:MouseEventArgs Occurs when the left
mouse button is pressed
when the mouse is over
the polygon.
mouseout eventArgs:MouseEventArgs Occurs when the mouse
cursor moves out of the
235
Name Arguments Description
area covered by the
polygon.
mouseover eventArgs:MouseEventArgs Occurs when the mouse is
over the polygon.
mouseup eventArgs:MouseEventArgs Occurs when the left
mouse button is lifted up
when the mouse is over
the polygon.
rightclick eventArgs:MouseEventArgs Occurs when the right
mouse button is used to
click the polygon.
Example
<!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 Maps Key", center: new Microsoft.Maps.Location(47.5, -122.3), zoom: 9 });
236
Microsoft.Maps.loadModule('Microsoft.Maps.AdvancedShapes', { callback:
shapesModuleLoaded });
}
function shapesModuleLoaded()
{
var polygonWithHoles = new Microsoft.Maps.Polygon([
[new Microsoft.Maps.Location(47.604, -121.940),
new Microsoft.Maps.Location(47.604, -121.540),
new Microsoft.Maps.Location(47.834, -121.540),
new Microsoft.Maps.Location(47.834, -121.940),
new Microsoft.Maps.Location(47.604, -121.940)],
[new Microsoft.Maps.Location(47.704, -121.740),
new Microsoft.Maps.Location(47.704, -121.640),
new Microsoft.Maps.Location(47.804, -121.640),
new Microsoft.Maps.Location(47.804, -121.740),
new Microsoft.Maps.Location(47.704, -121.740)],
[new Microsoft.Maps.Location(47.744, -121.700),
new Microsoft.Maps.Location(47.744, -121.680),
new Microsoft.Maps.Location(47.764, -121.680),
new Microsoft.Maps.Location(47.764, -121.700),
new Microsoft.Maps.Location(47.744, -121.700)]]);
map.entities.push(polygonWithHoles);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
237
</body>
</html>
Microsoft.Maps.Directions API Reference
This section contains reference documentation for the Microsoft.Maps.Directions API, which
contains types that allow you to calculate route directions and display them on your Bing Maps
AJAX Control 7.0 map. Use the calculateDirections method of the DirectionsManager Class to
calculate a route. Sample code can be found at http://www.bingmapsportal.com/isdk/ajaxv7.
Before you can access the types found in the Microsoft.Maps.Directions API, you must
first load this module using the loadModule method. Information about loading modules
is in the Module Loading Methods topic.
In This Section
BusinessDetails Class
BusinessDisambiguationSuggestion Class
DirectionsErrorEventArgs Object
DirectionsEventArgs Object
DirectionsManager Class
DirectionsRenderOptions Object
DirectionsRequestOptions Object
DirectionsStep Class
DirectionsStepEventArgs Object
DirectionsStepRenderEventArgs Object
DirectionsStepWarning Class
Disambiguation Class
DisambiguationRenderEventArgs Object
DistanceUnit Enumeration
IconType Enumeration
LocationDisambiguationSuggestion Class
Maneuver Enumeration
ResetDirectionsOptions Object
Route Class
RouteAvoidance Enumeration
RouteLeg Class
RouteMode Enumeration
238
RouteOptimization Enumeration
RoutePath Class
RouteResponseCode Enumeration
RouteSelectorEventArgs Object
RouteSelectorRenderEventArgs Object
RouteSubLeg Class
RouteSummary Class
RouteSummaryRenderEventArgs Object
StepWarningStyle Enumeration
TimeType Enumeration
TransitLine Class
TransitOptions Object
Waypoint Class
WaypointEventArgs Object
WaypointOptions Object
WaypointRenderEventArgs Object
BusinessDetails Class
Contains business details for a waypoint.
Properties
Name Type Description
businessName string The business name of the
waypoint.
entityId string The Bing Maps entity ID of the
business.
phoneNumber string The phone number of the
business.
website string The URL of the business
website.
239
See Also
BusinessDisambiguationSuggestion Class
Contains a possible business result returned from geocoding a specified waypoint address or
location.
Properties
Name Type Description
address string The address of the business
result.
distance number The distance of the business
result from the originally
specified waypoint address or
location.
entityId string The Yellow Pages ID for the
business.
index number The index of this suggestion
within the business suggestion
array.
isApproximate boolean A boolean indicating whether
the result location is
approximate.
location Location The location of the business
suggestion.
name string The name of the business.
phoneNumber string The phone number of the
business suggestion.
photoUrl string The URL of a photo of the
business suggestion.
rooftopLocation Location The rooftop location of the
business suggestion.
website string The URL of the business
results website.
240
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
241
// Create start and end waypoints
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address:
"Seattle, WA" });
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address:
"Microsoft" } );
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set the id of the div to use to display the directions
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when an error occurs
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
// Display the error message
alert(e.message);
// If the error is a disambiguation error, display the results.
if (e.responseCode ==
Microsoft.Maps.Directions.RouteResponseCode.waypointDisambiguation)
{
DisplayDisambiguation();
}
}
242
function DisplayDisambiguation()
{
var results = "";
var waypoints = directionsManager.getAllWaypoints();
var i = 0;
for (i=0; i<waypoints.length; i++)
{
var disambigResult = waypoints[i].getDisambiguationResult();
if (disambigResult != null)
{
results = results + "Address matches for " + waypoints[i].getAddress()
+ ":\n";
if(disambigResult.businessSuggestions.length != 0)
{
var j = 0;
for (j=0; j<disambigResult.businessSuggestions.length; j++)
{
results = results + disambigResult.businessSuggestions[j].name +
", " + disambigResult.businessSuggestions[j].address + "\n";
}
}
else if (disambigResult.locationSuggestions.length != 0)
{
var k = 0;
for (k=0; k<disambigResult.locationSuggestions.length; k++)
{
results = results +
disambigResult.locationSuggestions[k].suggestion + "\n";
}
}
243
else
{
results = results + disambigResult.headerText + "\n";
}
}
}
alert(results);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
See Also
Disambiguation Class
DirectionsErrorEventArgs Object
Contains arguments for directions error events.
Properties
Name Type Description
responseCode RouteResponseCode The code which identifies
the error that occurred.
message string The error message.
244
Example
<!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()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
245
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Paris,
France"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set directions render options - in this case, specify the div where the
itinerary is displayed.
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated and when an error
occurs
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated',
displayMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError );
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayMessage(e)
{
alert("Route calculation complete!");
}
function displayError(e)
{
alert( e.message );
246
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
DirectionsEventArgs Object
Contains the arguments for directions events.
Properties
Name Type Description
routeSummary RouteSummary[] The route summary (or
summaries) of the route(s)
defined in the route property.
route Route[] The calculated route (or
routes, if the route mode is
transit).
Example
<!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"/>
247
<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()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set directions options - in this case, calculate a transit route.
directionsManager.setRequestOptions({ routeMode:
Microsoft.Maps.Directions.RouteMode.transit });
248
// Set directions render options - in this case, specify the div
// where the itinerary is displayed.
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated',
displayRouteNumber);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayRouteNumber(e)
{
alert("Number of transit routes available: " + e.route.length);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
DirectionsManager Class
Contains methods for calculating directions and displaying a route on a map.
249
Constructor
Name Definition Description
DirectionsManager DirectionsManager(map:Map) Initializes a new instance of
the DirectionsManager
class.
Methods
Name Definition Return Value Description
addWaypoint addWaypoint(waypoint:Waypoint,
index:number)
None Adds a
waypoint to the
route at the
given index, if
specified. If an
index is not
specified the
waypoint is
added as the
last waypoint in
the route.
To recalculate
the route, use
calculateDirec
tions.
The maximum
number of
walking or
driving
waypoints is
25. The
maximum
number of
transit
waypoints is 2.
Up to 10 via
points are
allowed
between two
250
Name Definition Return Value Description
stop waypoints.
calculateDirecti
ons
calculateDirections() None Calculates
directions
based on
request and
render options
set
(setRequestO
ptions,
setRenderOpti
ons) and the
waypoints
added
(addWaypoint)
. The
directionsUpd
ated event fires
when the
calculation is
complete and
the route is
displayed on
the map.
You must call
this method
after making
any changes to
the route
options or
waypoints.
clearDisplay clearDisplay() None Clears the
directions
displayed and
removes the
route line from
the map. This
method does
not remove
waypoints from
the route and
251
Name Definition Return Value Description
retains all
calculated
direction
information and
option settings.
To clear the
calculated
directions and
options, use
resetDirection
s.
dispose dispose() None Deletes the
DirectionsMan
ager object and
releases any
associated
resources.
getAllWaypoint
s
getAllWaypoints() Waypoint[] Returns the
waypoints for
the route.
getMap getMap() Map Returns the
map object
associated with
the directions
manager.
getNearbyMajor
Roads
getNearbyMajorRoads(location:Locatio
n, callback:function,
errorCallback:function,
userData:object)
None Searches
around the
specified
location for
nearby major
roads and
returns them as
an object to the
callback
function.
getRenderOptio
ns
getRenderOptions() DirectionsRender
Options
Returns the
route render
options.
252
Name Definition Return Value Description
getRequestOpti
ons
getRequestOptions() DirectionsRequest
Options
Returns the
directions
request
options.
getRouteResult getRouteResult() Route[] Returns the
current
calculated
route(s). If the
route was not
successfully
calculated, null
is returned.
removeWaypoi
nt
removeWaypoint(waypoint:Waypoint) or
removeWaypoint(index:number)
None Removes the
given waypoint
or the waypoint
identified by the
given index
from the route.
Use
calculateDirec
tions to update
the route once
a waypoint has
been removed.
resetDirections resetDirections(options:ResetDirectio
nsOptions)
None If no options
object is
supplied, clears
the directions
request and
render options
and removes
all waypoints.
reverseGeocod
e
reverseGeocode(location:Location,
callback:function,
errorCallback:function,
userData:object)
None Matches the
specified
location to an
address and
returns the
address to the
specified
253
Name Definition Return Value Description
callback
function.
setMapView setMapView() None Sets the map
view based on
the current
route index.
setRenderOptio
ns
setRenderOptions(options:DirectionsR
enderOptions)
None Sets the
specified
render options
for the route.
setRequestOpti
ons
setRequestOptions(options:Directions
RequestOptions)
None Sets the
specified route
calculation
options.
Events
Name Arguments Description
afterRouteSelectorRender RouteSelectorRenderEventArgs Occurs after the route
selector has fully rendered.
afterStepRender DirectionsStepRenderEventArgs Occurs after each step in the
itinerary has fully rendered.
afterSummaryRender RouteSummaryRenderEventArg
s
Occurs after the route
summary has fully rendered.
afterWaypointRender WaypointRenderEventArgs Occurs after each route
waypoint has fully rendered.
beforeDisambiguationRende
r
DisambiguationRenderEventArg
s
Occurs before the waypoint
disambiguation element is
rendered. Use the
autoDisplayDisambiguatio
n directions render option to
automatically display
waypoint disambiguation.
beforeRouteSelectorRender RouteSelectorRenderEventArgs Occurs just before the route
selector renders.
254
Name Arguments Description
beforeStepRender DirectionsStepRenderEventArgs Occurs just before each step
in the itinerary renders.
beforeSummaryRender RouteSummaryRenderEventArg
s
Occurs just before the route
summary renders.
beforeWaypointRender WaypointRenderEventArgs Occurs just before each
route waypoint renders.
directionsError DirectionsErrorEventArgs Occurs when calculating the
directions caused an error.
directionsUpdated DirectionsEventArgs Occurs when the directions
calculation was successful
and the itinerary and route
on the map have been
updated.
dragDropCompleted None Occurs when the drag of a
waypoint or route is
completed.
itineraryStepClicked DirectionsStepEventArgs Occurs when a step in the
itinerary is clicked.
mouseEnterRouteSelector RouteSelectorEventArgs Occurs when the mouse
cursor is over the route
selector.
mouseEnterStep DirectionsStepEventArgs Occurs when the mouse
cursor is over a directions
step.
mouseLeaveRouteSelector RouteSelectorEventArgs Occurs when the mouse
cursor leaves the route
selector.
mouseLeaveStep DirectionsStepEventArgs Occurs when the mouse
cursor leaves a directions
step.
routeSelectorClicked RouteSelectorEventArgs Occurs when the route
selector is clicked.
waypointAdded WaypointEventArgs Occurs when a new
waypoint is added to the
route.
255
Name Arguments Description
waypointRemoved WaypointEventArgs Occurs when a waypoint is
removed from the route.
Example
<!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()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
256
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Portland,
OR"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set the id of the div to use to display the directions
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when an error occurs
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
alert(e.message);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
257
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
DirectionsRenderOptions Object
Represents render options for a route.
Properties
Name Type Description
autoDisplayDisambiguation boolean A boolean indicating
whether to automatically
display a disambiguation
dialog for waypoints. The
default value is true.
If this value is set to true, a
directionsError event
caused by waypoint
disambiguation is not
thrown.
autoUpdateMapView boolean A boolean indicating
whether to automatically
set the map view to the
best map view of the
calculated route. The
default value is true.
disambiguationPushpinOptions PushpinOptions The options that define the
pushpin to use for
disambiguation.
displayDisclaimer boolean A boolean indicating
whether to display the
disclaimer about the
accuracy of the directions.
The default value is false.
displayManeuverIcons boolean A boolean indicating
whether to display the
icons for each direction
258
Name Type Description
maneuver. The default
value is true.
displayPostItineraryItemHints boolean A boolean indicating
whether to display direction
hints that describe when
an direction step was
missed. The default value
is true.
displayPreItineraryItemHints boolean A boolean indicating
whether to display direction
hints that describe what to
look for before you come to
the next direction step. The
default value is true.
displayRouteSelector boolean A boolean indicating
whether to display the
route selector control. The
default value is true.
displayStepWarnings boolean A boolean indicating
whether to display direction
warnings. The default
value is true.
displayTrafficAvoidanceOption boolean A boolean indicating
whether to display the
control that allows the user
to choose to avoid traffic.
The default value is true.
displayWalkingWarning boolean A boolean indicating
whether to display a
warning about walking
directions. The default
value is true.
drivingPolylineOptions PolylineOptions The options that define
how to draw the route line
on the map, if the
RouteMode is driving.
itineraryContainer DOMElement The DOM element inside
which the directions
259
Name Type Description
itinerary will be rendered.
lastWaypointIcon string The URL of the icon to use
for the end waypoint.
middleWaypointIcon string The URL of the icon to use
for intermediate waypoints.
stepPushpinOptions PushpinOptions The options that define the
pushpin to use for each
direction step.
transitPolylineOptions PolylineOptions The options that define
how to draw the route line
on the map, if the
RouteMode is transit.
viapointPushpinsOptions PushpinOptions The options that define the
pushpin to use for each via
point of the route, which
are any waypoints other
than the start and end
waypoints.
walkingPolylineOptions PolylineOptions The options that define
how to draw the route line
on the map, if the
RouteMode is walking.
waypointPushpinOptions PushpinOptions The options that define the
pushpin to use for the
route waypoint.
Example
<!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"/>
260
<script type="text/javascript"
src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: "Green
Lake" } );
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set request options
261
directionsManager.setRequestOptions({ routeMode:
Microsoft.Maps.Directions.RouteMode.walking });
// Set the render options
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv'), displayWalkingWarning: false,
walkingPolylineOptions:{strokeColor: new Microsoft.Maps.Color(200, 0, 255, 0)} });
// Specify a handler for when an error occurs
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
// Display the error message
alert(e.message);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
262
</html>
DirectionsRequestOptions Object
Contains options for the directions to calculate.
Properties
Name Type Description
avoidTraffic boolean A boolean indicating whether to
return traffic info when calculating
the route. The default value is
false.
distanceUnit DistanceUnit The unit to use when displaying
direction distances. The default
value is based on the specified
culture.
maxRoutes number The number of routes to calculate.
If the routeMode is driving or
walking, only 1 route is supported.
If the routeMode is transit, up to 6
routes can be calculated and the
default is 3.
routeAvoidance RouteAvoidance[] The features to avoid when
calculating the route. The default
value is none.
routeDraggable boolean A boolean indicating whether the
route line on the map can be
dragged with the mouse cursor.
The default value is true.
When a route is dragged, a via
point is added to the route.
To change the drag behavior of a
waypoint, set the draggable
property of the
waypointPushpinOptions (of the
DirectionsRenderOptions).
263
Name Type Description
routeIndex number If multiple routes are returned, the
index of the route and directions to
display. This property only applies
to routes where the routeMode is
transit, and in this case up to 6
routes are supported.
routeMode RouteMode The type of directions to calculate.
The default value is driving.
When the culture is ja-jp, only the
transit route mode is supported,
which is the default for that
market.
routeOptimization RouteOptimization The optimization setting for the
route calculation. The default
value is shortestTime.
transitOptions TransitOptions The extra options for calculating a
route if the routeMode is transit.
Example
<!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;
var directionsManager = null;
264
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: "Redmond,
WA" } );
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set request options
directionsManager.setRequestOptions({ avoidTraffic: true, routeOptimization:
Microsoft.Maps.Directions.RouteOptimization.shortestDistance });
// Set the render options
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when an error occurs
265
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
// Display the error message
alert(e.message);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
DirectionsStep Class
Represents one direction in a set of route directions.
Properties
Name Type Description
childItineraryItems DirectionsStep[] The child direction items for this
directions step.
coordinate Location The location of the start of the
266
Name Type Description
direction.
distance string The total distance of the step in
the unit specified in the
distanceUnit property of the
DirectionsRequestOptions.
durationInSeconds number The total time, in seconds, of the
direction step.
formattedText string The HTML formatted route
instruction associated with the
step.
iconType IconType The type of the icon associated
with this step.
isImageRoadShield boolean A boolean indicating whether
the maneuver image is a road
shield image.
maneuver Maneuver The maneuver type associated
with this step.
maneuverImageName string The name of the maneuver
image.
monetaryCost number The cost of the step.
postIntersectionHints string[] An array of strings, where each
string is a hint to help determine
when to move to the next
direction step. Not all direction
steps have hints.
preIntersectionHints string[] An array of strings, where each
string is a hint to help determine
when you have arrived at this
direction step. Not all direction
steps have hints.
startStopName string The name of the transit stop
where this step originates.
transitLine TransitLine The transit line associated with
this step.
transitStepIcon string The URL of the image to use for
267
Name Type Description
transit direction steps.
transitStopId string The ID of the transit stop.
transitTerminus string The name of the transit line end.
warnings DirectionsStepWarning[] An array of strings, where each
string is a route warning
associated with this step.
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
268
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set directions options
directionsManager.setRequestOptions({ routeMode:
Microsoft.Maps.Directions.RouteMode.transit});
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated',
displayMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'itineraryStepClicked',
displayStepMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
269
}
function displayError(e)
{
alert(e.message);
}
function displayMessage(e)
{
alert("Click a step in the itinerary to display extra transit information.");
}
function displayStepMessage(e)
{
if (e.step.iconType == Microsoft.Maps.Directions.IconType.bus )
{
alert("The name of the transit agency for this step is: " +
e.step.transitLine.agencyName + ". For information about this transit agency and transit
line, go to " + e.step.transitLine.agencyUrl + ".");
}
else
{
alert("The step that was clicked is not a transit step.");
}
}
</script>
</head>
270
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
DirectionsStepEventArgs Object
Contains arguments for directions step events.
Properties
Name Type Description
handled boolean A boolean indicating whether
the event is handled. Set this
property to true to override
the default behavior.
location Location The location along the route
where the direction step
occurs.
routeIndex number A number indicating the route
(if multiple routes were
returned) to which the
directions step belongs.
routeLegIndex number A number indicating the route
leg to which the directions
step belongs.
step DirectionsStep The directions step.
stepIndex number A number indicating the index
of the directions step within
the route leg array.
stepNumber number A number indicating the
directions step number within
the route.
271
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
272
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set directions options
directionsManager.setRequestOptions({ routeMode:
Microsoft.Maps.Directions.RouteMode.transit});
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated',
displayMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'itineraryStepClicked',
displayStepMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
alert(e.message);
}
function displayMessage(e)
{
alert("Click a step in the itinerary to display extra step information.");
273
}
function displayStepMessage(e)
{
alert("The directions step that was clicked is step number " + (e.stepIndex +
1) + ", and the location of this step is: " + e.location);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
DirectionsStepRenderEventArgs Object
Contains arguments for directions step render events.
Properties
Name Type Description
containerElement object The DOM element which
contains the directions step.
You can use this property to
add custom content.
handled boolean A boolean indicating whether
the event is handled. This
property is only available for the
beforeStepRender event. Set
this property to true to override
the default behavior.
lastStep boolean A boolean indicating whether
the step is the last directions
274
Name Type Description
step.
routeIndex number A number indicating the index
of the route to which this step
belongs.
routeLegIndex number A number indicating the index
of the route leg to which this
step belongs.
step DirectionsStep The directions step.
stepIndex number The index of this directions step
within the route leg step array.
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
275
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set directions options
directionsManager.setRequestOptions({ routeMode:
Microsoft.Maps.Directions.RouteMode.transit});
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'afterStepRender',
displayStepMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
276
}
function displayError(e)
{
alert(e.message);
}
function displayStepMessage(e)
{
var message = "A directions step has rendered.";
if (e.lastStep) { message = message + " This is the last itinerary step.";
}
alert(message);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
DirectionsStepWarning Class
Represents a route direction warning, such as a traffic congestion warning.
Properties
277
Name Type Description
style StepWarningStyle The type of the route warning.
text string The warning text.
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
278
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set directions options
directionsManager.setRequestOptions({ avoidTraffic: true });
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated',
displayMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayMessage(e)
{
// Variable for counting warnings
279
var warningCount = 0;
for( j=0; j< e.route[0].routeLegs.length; j++)
{
var i = 0;
for (i=0; i < e.route[0].routeLegs[j].itineraryItems.length; i++)
{
if (e.route[0].routeLegs[j].itineraryItems[i].warnings.length != 0 )
{
warningCount = warningCount +
e.route[0].routeLegs[j].itineraryItems[i].warnings.length;
}
}
}
alert("There are " + warningCount + " warning(s) in this route.");
}
function displayError(e)
{
alert(e.message);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
280
</html>
Disambiguation Class
Contains disambiguation results for a waypoint geocoding request.
Properties
Name Type Description
businessSuggestions BusinessDiambiguationSuggestion[] The possible business
result matches for the
originally specified
waypoint address or
location.
hasMoreSuggestions boolean A boolean indicating
whether there are more
result suggestions
available.
headerText string The disambiguation
header text.
locationSuggestions LocationDiambiguationSuggestion[] The possible location
result matches for the
originally specified
waypoint address or
location.
Example
<!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"/>
281
<script type="text/javascript"
src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address:
"Seattle, WA" });
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: "148th
Way Bellevue" } );
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
282
// Set the id of the div to use to display the directions, and prevent the
default disambiguation dialog from appearing by setting that option
directionsManager.setRenderOptions({autoDisplayDisambiguation:false,
itineraryContainer: document.getElementById('itineraryDiv') });
// Specify a handler for when an error occurs
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
// Display the error message
alert(e.message);
// If the error is a disambiguation error, display the results.
if (e.responseCode ==
Microsoft.Maps.Directions.RouteResponseCode.waypointDisambiguation)
{
DisplayDisambiguation();
}
}
function DisplayDisambiguation()
{
var results = "";
var waypoints = directionsManager.getAllWaypoints();
var i = 0;
283
for (i=0; i<waypoints.length; i++)
{
var disambigResult = waypoints[i].getDisambiguationResult();
if (disambigResult != null)
{
results = results + "Address matches for " + waypoints[i].getAddress()
+ ":\n";
if(disambigResult.businessSuggestions.length != 0)
{
var j = 0;
for (j=0; j<disambigResult.businessSuggestions.length; j++)
{
results = results + disambigResult.businessSuggestions[j].name +
", " + disambigResult.businessSuggestions[j].address + "\n";
}
}
else if (disambigResult.locationSuggestions.length != 0)
{
var k = 0;
for (k=0; k<disambigResult.locationSuggestions.length; k++)
{
results = results +
disambigResult.locationSuggestions[k].suggestion + "\n";
}
}
else
{
results = results + disambigResult.headerText + "\n";
}
}
}
284
alert(results);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
See Also
Waypoint Class
DisambiguationRenderEventArgs Object
Contains arguments for a beforeDisambiguationRender event.
Properties
Name Type Description
containerElement object The DOM element which
contains the disambiguation
list. You can use this property
to add custom content.
handled boolean A boolean indicating whether
the event is handled. Set this
property to true to override the
default behavior. If this property
is set to true, a directionsError
event for waypoint
disambiguation is thrown.
waypoint Waypoint The waypoint that needs to be
disambiguated.
285
DistanceUnit Enumeration
Defines the distance unit to use when generating routes and corresponding itineraries.
Constants
Code Name Description
0 kilometers Kilometers are used to measure
route distances.
1 miles Miles are used to measure
route distances.
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
286
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: "Redmond,
WA" } );
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set request options
directionsManager.setRequestOptions({ distanceUnit:
Microsoft.Maps.Directions.DistanceUnit.kilometers, routeOptimization:
Microsoft.Maps.Directions.RouteOptimization.shortestDistance });
// Set the render options
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when an error occurs
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
287
directionsManager.calculateDirections();
}
function displayError(e)
{
// Display the error message
alert(e.message);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
IconType Enumeration
Contains route icon types.
Constants
Type Code Name Description
0 none There is no route icon.
1 other The icon is some other type of
icon.
288
Type Code Name Description
2 auto The icon is a car icon.
3 ferry The icon is a ferry icon.
4 walk The icon is a walking icon.
5 bus The icon is a bus, or transit, icon
6 train The icon is a train icon.
7 airline The icon is an airline icon.
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
289
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set directions options
directionsManager.setRequestOptions({ routeMode:
Microsoft.Maps.Directions.RouteMode.transit});
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated',
displayMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'itineraryStepClicked',
displayStepMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
290
}
function displayError(e)
{
alert(e.message);
}
function displayMessage(e)
{
alert("Click a step in the itinerary to display extra transit information.");
}
function displayStepMessage(e)
{
if (e.step.iconType == Microsoft.Maps.Directions.IconType.bus )
{
alert("The name of the transit agency for this step is: " +
e.step.transitLine.agencyName + ". For information about this transit agency and transit
line, go to " + e.step.transitLine.agencyUrl + ".");
}
else
{
alert("The step that was clicked is not a transit step.");
}
}
</script>
291
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
LocationDisambiguationSuggestion Class
Contains a possible result returned from geocoding a specified waypoint address or location.
Properties
Name Type Description
formattedSuggestion string The HTML formatted address
suggestion.
location Location The location of the
suggestion.
rooftopLocation Location The rooftop location of the
suggestion.
suggestion string The address suggestion.
Example
<!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>
292
<script type="text/javascript">
var map = null;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address:
"Seattle, WA" });
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: "148th
Way Bellevue" } );
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set the id of the div to use to display the directions
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
293
// Specify a handler for when an error occurs
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
// Display the error message
alert(e.message);
// If the error is a disambiguation error, display the results.
if (e.responseCode ==
Microsoft.Maps.Directions.RouteResponseCode.waypointDisambiguation)
{
DisplayDisambiguation();
}
}
function DisplayDisambiguation()
{
var results = "";
var waypoints = directionsManager.getAllWaypoints();
var i = 0;
for (i=0; i<waypoints.length; i++)
{
var disambigResult = waypoints[i].getDisambiguationResult();
if (disambigResult != null)
294
{
results = results + "Address matches for " + waypoints[i].getAddress()
+ ":\n";
if(disambigResult.businessSuggestions.length != 0)
{
var j = 0;
for (j=0; j<disambigResult.businessSuggestions.length; j++)
{
results = results + disambigResult.businessSuggestions[j].name +
", " + disambigResult.businessSuggestions[j].address + "\n";
}
}
else if (disambigResult.locationSuggestions.length != 0)
{
var k = 0;
for (k=0; k<disambigResult.locationSuggestions.length; k++)
{
results = results +
disambigResult.locationSuggestions[k].suggestion + "\n";
}
}
else
{
results = results + disambigResult.headerText + "\n";
}
}
}
alert(results);
}
</script>
295
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
See Also
Disambiguation Class
Maneuver Enumeration
Contains route maneuver types.
Constants
Type Code Name Description
0 none The step is not a maneuver.
1 unknown The maneuver is unknown.
2 departStart Depart from the start
waypoint.
3 departIntermediateStop Depart from an intermediate
stop point going in a
different direction and on a
different road than which
you arrived.
4 departIntermediateStopReturning Depart from an intermediate
stop point going back in the
same direction and on the
same road on which you
arrived.
5 arriveFinish Arrive at the end waypoint.
6 arriveIntermediateStop Arrive at an intermediate
stop point.
296
Type Code Name Description
7 turnLeft Turn left.
8 turnRight Turn right.
9 turnBack Turn back sharply.
10 uTurn Make a u-turn to go in the
opposite direction.
11 turnToStayLeft Turn left to stay on the
same road.
12 turnToStayRight Turn right to stay on the
same road.
13 bearLeft Bear left.
14 bearRight Bear right.
15 keepToStayLeft Keep left to stay on the
same road.
16 keepToStayRight Keep right to stay on the
same road.
17 keepToStayStraight Keep straight to stay on the
same road.
18 keepLeft Keep left onto a different
road.
19 keepRight Keep right onto a different
road.
20 keepStraight Keep straight onto a
different road.
21 take Take the road. This
instruction is used when
you are entering or exiting a
ferry.
22 takeRampLeft Take the ramp to the left.
23 takeRampRight Take the ramp to the right.
24 takeRampStraight Stay straight to take the
ramp.
25 keepOnRampLeft Keep left and continue onto
297
Type Code Name Description
ramp.
26 keepOnRampRight Keep right and continue
onto ramp.
27 keepOnRampStraight Keep straight and continue
onto ramp.
28 merge Merge onto highway.
29 continueRoute Continue on the current
road.
30 roadNameChange The road name changed.
31 enterRoundabout Enter a roundabout.
32 exitRoundabout Exit a roundabout.
33 turnRightThenTurnRight Turn right and then turn
right.
34 turnRightThenTurnLeft Turn right and then turn left.
35 turnRightThenBearRight Turn right and then bear
right.
36 turnRightThenBearLeft Turn right and then bear
left.
37 turnLeftThenTurnLeft Turn left and then turn left.
38 turnLeftThenTurnRight Turn left and then turn right.
39 turnLeftThenBearLeft Turn left and then bear left.
40 turnLeftThenBearRight Turn left and then bear
right.
41 bearRightThenTurnRight Bear right and then turn
right.
42 bearRightThenTurnLeft Bear right and then turn left.
43 bearRightThenBearRight Bear right and then bear
right.
44 bearRightThenBearLeft Bear right and then bear
left.
45 bearLeftThenTurnLeft Bear left and then turn left.
298
Type Code Name Description
46 bearLeftThenTurnRight Bear left and then turn right.
47 bearLeftThenBearRight Bear left and then bear
right.
48 bearLeftThenBearLeft Bear left and then bear left.
49 rampThenHighwayRight Take left ramp onto
highway. This is part of a
combined instruction.
50 rampThenHighwayLeft Take right ramp onto
highway. This is part of a
combined instruction.
51 rampToHighwayStraight Stay straight to take the
ramp onto the highway.
This is part of a combined
instruction.
52 enterThenExitRoundabout Enter and exit a
roundabout.
53 bearThenMerge Bear instruction and then a
merge instruction.
54 turnThenMerge Turn instruction and then a
merge instruction.
55 bearThenKeep Bear instruction and then a
keep instruction.
56 transfer Transfer between public
transit lines at a transit stop.
57 wait Wait at a transit stop.
58 takeTransit Take transit.
59 walk The maneuver is a walking
instruction.
60 transitDepart Get on a public transit line
at a transit stop.
61 transitArrive Get off a public transit line
at a transit stop.
299
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
300
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set directions options
directionsManager.setRequestOptions({ routeMode:
Microsoft.Maps.Directions.RouteMode.transit});
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated',
displayMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'itineraryStepClicked',
displayStepMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
alert(e.message);
}
301
function displayMessage(e)
{
alert("Click a transit step in the itinerary to display extra maneuver
information.");
}
function displayStepMessage(e)
{
if (e.step.maneuver == Microsoft.Maps.Directions.Maneuver.transfer )
{
alert("This step is transit transfer instruction.");
}
else if (e.step.maneuver == Microsoft.Maps.Directions.Maneuver.takeTransit )
{
alert("This step is a transit instruction.");
}
else if (e.step.maneuver == Microsoft.Maps.Directions.Maneuver.transitDepart
)
{
alert("This step is a transit departure instruction.");
}
else if (e.step.maneuver == Microsoft.Maps.Directions.Maneuver.transitArrive
)
{
alert("This step is a transit arrival instruction.");
}
else
{
alert("This step is not a transit instruction.");
}
302
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
ResetDirectionsOptions Object
Contains options for the resetDirections method of the DirectionsManager Class.
Properties
Name Type Description
removeAllWaypoints boolean A boolean indicating whether
to remove all of the
waypoints of the route. The
default value is false.
resetRenderOptions boolean A boolean indicating whether
to reset all of the render
options set for the route. The
default value is false.
resetRequestOptions boolean A boolean indicating whether
to reset all of the request
options set for the route. The
default value is false.
303
Route Class
Represents a route.
Properties
Name Type Description
routeLegs RouteLeg[] The legs of the route. Each
route leg represents the route
between two waypoints.
RouteAvoidance Enumeration
Defines features to avoid when calculating the route.
Constants
Code Name Description
0 none Calculate the best route
using any travel option
available.
1 minimizeLimitedAccessHighway Reduce the use of limited
access highways when
calculating the route.
2 minimizeToll Reduce the use of roads
with tolls when calculating
the route.
4 avoidLimitedAccessHighway Avoid using limited access
highways when calculating
the route.
8 avoidToll Avoid using roads with tolls
when calculating the route.
16 avoidExpressTrain Avoid using express trains
when calculating the route.
This option only affects
304
Code Name Description
routes with a transit
RouteMode that have the
culture set to ja-jp.
32 avoidAirline Avoid using airlines when
calculating the route. This
option only affects routes
with a transit RouteMode
that have the culture set to
ja-jp.
64 avoidBulletTrain Avoid using bullet trains
when calculating the route.
This option only affects
routes with a transit
RouteMode that have the
culture set to ja-jp.
RouteLeg Class
Represents a leg of a route. A route leg is the part of the route between two stop waypoints.
Properties
Name Type Description
endTime DateTime The end time of the route leg.
This property only applies when
the routeMode of the
DirectionsRequestOptions is set
to transit.
endWaypointLocation Location The location of the last waypoint
of this leg.
itineraryItems DirectionsStep[] The directions steps associated
with this route leg.
originalRouteIndex number The index of the route to which
this route leg belongs.
startTime DateTime The start time of the route leg.
305
Name Type Description
This property only applies when
the routeMode of the
DirectionsRequestOptions is set
to transit.
startWaypointLocation Location The location of the first waypoint
of this route leg.
subLegs RouteSubLeg[] The sub legs of this route leg. A
sub leg of a route is the part of
the route between a stop point
and a via point or between two
via points.
summary RouteSummary The summary which describes
this route leg.
Example
<!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()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
306
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated',
displayMessage);
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayMessage(e)
{
alert("The calculated route has " +
e.route[0].routeLegs[0].itineraryItems.length + " direction steps.");
307
}
function displayError(e)
{
alert("An error has occurred calculating the directions.");
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
RouteMode Enumeration
Defines the type of route to calculate.
Constants
Name Description
driving Driving directions are calculated.
transit Transit directions are calculated.
walking Walking directions are calculated.
RouteOptimization Enumeration
Defines optimization options for calculating directions.
Constants
308
Code Name Description
0 shortestTime Calculate a route the shortest
time.
1 shortestDistance Calculate a route with the
shortest distance.
3 minimizeMoney Minimize the cost when
calculating directions. This
option only affects routes with
a transit RouteMode that
have the culture set to ja-jp.
4 minimizeTransfers Minimize transit transfers
when calculating directions.
This option only affects routes
with a transit RouteMode that
have the culture set to ja-jp.
5 minimizeWalking Minimize the amount of
walking when calculating
directions. This option only
affects routes with a transit
RouteMode that have the
culture set to ja-jp.
RoutePath Class
Represents the route line shape on the map.
Use the setRenderOptions method of the DirectionsManager Class to set
DirectionsRenderOptions to customize the look of the route line on the map.
Properties
Name Type Description
decodedLatitudes double[] An array of latitudes, where
each latitude is the latitude for
one of the locations that
define the route line.
309
Name Type Description
decodedLongitudes double[] An array of longitudes, where
each is the longitude value for
one of the locations that
define the route line.
decodedRegions Object[] An array of regions that
define, depending on the
zoom level, how the route line
should be rendered.
RouteResponseCode Enumeration
Contains response codes for a route calculation request.
Constants
Response Code Name Description
0 success The route was successfully
calculated.
1 unknownError An unknown error has occurred.
2 cannotFindNearbyRoad A nearby road cannot be found for
one or more of the route
waypoints.
3 tooFar The distance between two route
waypoints, or the total length of the
route exceeds the limit of the route
mode. Modify the waypoint
locations so that they are closer
together.
4 noSolution A route cannot be calculated for
the specified waypoints. For
example, this code is returned
when a route between Seattle,
WA and Honolulu, HI is
requested.
5 dataSourceNotFound There is no route data for the
310
Response Code Name Description
specified waypoints.
7 noAvailableTransitTrip There are no transit options
available for the specified time.
8 transitStopsTooClose The transit stops are so close that
walking is always a better option.
9 walkingBestAlternative The transit stops are so close that
walking is a better option.
10 outOfTransitBounds There is no transit data available
for the route or for one or more of
the specified waypoints, or the
waypoints are in different transit
areas that do not overlap.
11 timeout The directions calculation request
has timed out.
12 waypointDisambiguation One or more waypoints need to be
disambiguated. This error does not
occur if the
autoDisplayDisambiguation
directions render option is set to
true.
13 hasEmptyWaypoint One or more waypoints do not
have an address or location
specified.
14 exceedMaxWaypointLimit The maximum number of
waypoints, which is 25, has been
exceeded.
15 atleastTwoWaypointRequired At least two waypoints are required
to calculate a route.
16 firstOrLastStoppointIsVia The first or last waypoint is a via
point, which is not allowed.
17 searchServiceFailed The search service failed to return
results.
18 invalidCredentials The credentials passed to the
Directions module are invalid.
311
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints
312
var waypoint1 = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: "Redmond,
WA"});
var waypoint3 = new Microsoft.Maps.Directions.Waypoint({ address: "Bellevue,
WA", isViapoint: true } );
directionsManager.addWaypoint(waypoint1);
directionsManager.addWaypoint(waypoint2);
directionsManager.addWaypoint(waypoint3);
// Set the id of the div to use to display the directions
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when an error occurs
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
// Display the error message
alert(e.message);
// If the error is a viapoint error, display an error
if (e.responseCode ==
Microsoft.Maps.Directions.RouteResponseCode.firstOrLastStoppointIsVia )
{
alert("Please remove the 'isViapoint' option from your first or last stop
point.");
313
}
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
RouteSelectorEventArgs Object
Contains arguments for route selector events.
Properties
Name Type Description
handled boolean A boolean indicating whether
the event is handled. Set this
property to true to override the
default behavior.
routeIndex number A number indicating the index
of the route that was selected.
RouteSelectorRenderEventArgs Object
Contains arguments for route selector render events.
Properties
Name Type Description
containerElement object The DOM element which contains
the route selector. You can use this
314
Name Type Description
property to add custom content.
handled boolean A boolean indicating whether the
event is handled. This property is
only available for the
beforeRouteSelectorRender event.
Set this property to true to override
the default behavior.
routeIndex number A number indicating the index of the
selected route.
routeLeg RouteLeg The route leg of the selected route.
RouteSubLeg Class
Represents a route sub leg. A route sub leg is the part of the route between a stop point and a via
point or between two via points. One or more sub legs make up a route leg.
Properties
Name Type Description
actualEnd Location The location of the last
waypoint of the sub leg.
actualStart Location The location of the first
waypoint of the sub leg.
endDescription string The description of the last
waypoint of the sub leg.
routePath RoutePath The properties that define
the route line of this sub leg
on the map.
startDescription string The description of the first
waypoint of the sub leg.
summary RouteSummary The summary of this route
sub leg.
315
RouteSummary Class
Represents a route summary.
Properties
Name Type Description
distance double The total travel distance of the
route, specified in the units set in
the distanceUnit property of the
DirectionsRequestOptions.
monetaryCost double The cost of the route. This property
is only returned if the routeMode of
the DirectionsRequestOptions is set
to transit and the map culture is set
to ja-jp.
northEast Location The location of the northeast corner
of bounding box that defines the
best map view of the route.
southWest Location The location of the southwest corner
of bounding box that defines the
best map view of the route.
time number The total travel time, in seconds, for
the route.
timeWithTraffic number The total travel time, in seconds,
taking into account traffic delays, for
the route. This property is 0 if the
avoidTraffic property of the
DirectionsRequestOptions is set to
false.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
316
<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()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
317
// Set directions render options - in this case, specify the div where the
itinerary is displayed.
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated',
displayDistanceAndTime );
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayDistanceAndTime(e)
{
alert("Total Distance: " + e.routeSummary[0].distance + " miles\n" + "Total
Time: " + e.routeSummary[0].time/60 + " minutes" );
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
318
RouteSummaryRenderEventArgs Object
Contains arguments for route summary render events.
Properties
Name Type Description
containerElement object The DOM element which contains
the summary. You can use this
property to add custom content.
handled boolean A boolean indicating whether the
event is handled. This property is
only available for the
beforeSummaryRender event.
Set this property to true to
override the default behavior.
routeLegIndex number A number indicating the index of
the route leg which this summary
describes.
summary RouteSummary The summary that was rendered.
StepWarningStyle Enumeration
Contains types of route direction warnings.
Constants
Code Name Description
0 info The warning is just information
about the route direction.
1 minor The warning is a minor
warning, and may affect the
route direction.
2 moderate The warning is a moderate
warning and is likely to affect
319
Code Name Description
the route direction.
3 major The warning is a major
warning, and is highly likely to
affect the route direction.
4 ccZoneEnter The warning indicates a
congestion zone is being
entered.
5 ccZoneExit The warning indicates a
congestion zone is being
exited.
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
320
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set directions options
directionsManager.setRequestOptions({ avoidTraffic: true });
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated',
displayMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
321
}
function displayMessage(e)
{
// Variable for counting warnings
var warningCount = 0;
for( j=0; j< e.route[0].routeLegs.length; j++)
{
var i = 0;
for (i=0; i < e.route[0].routeLegs[j].itineraryItems.length; i++)
{
if (e.route[0].routeLegs[j].itineraryItems[i].warnings.length != 0 )
{
warningCount = warningCount +
e.route[0].routeLegs[j].itineraryItems[i].warnings.length;
for (k=0; k<
e.route[0].routeLegs[j].itineraryItems[i].warnings.length; k++)
{
if (e.route[0].routeLegs[j].itineraryItems[i].warnings[k].style
== Microsoft.Maps.Directions.StepWarningStyle.major)
{
alert("Alert! There is a major warning in this route.");
}
}
}
}
}
322
alert("There are " + warningCount + " warning(s) in this route.");
}
function displayError(e)
{
alert(e.message);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
TimeType Enumeration
Defines the transit time type.
Constants
Name Description
arrival The time specified is an arrival time.
departure The time specified is a departure time.
lastAvailable The time specified is the last available time.
This time type is only returned for routes with a
transit RouteMode that have the culture set to
ja-jp.
323
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
324
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set arrival time to be 4 hours from now
var timeToDepart = new Date();
timeToDepart.setTime(timeToDepart.getTime() + 14400000);
// Set directions options
directionsManager.setRequestOptions({ routeMode:
Microsoft.Maps.Directions.RouteMode.transit, transitOptions:{ transitTime: timeToDepart,
timeType: Microsoft.Maps.Directions.TimeType.arrival } });
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
alert(e.message);
}
325
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
See Also
TransitOptions Object
TransitLine Class
Contains information about a transit line.
Properties
Name Type Description
abbreviatedName string The short name for the transit
line.
agencyId number The ID of the agency that
owns the transit line.
agencyName string The name of the agency that
owns the transit line.
agencyUrl string The URL of the website of the
agency that owns the transit
line.
lineColor Color The color to use when
rendering this transit line on
the map.
lineTextColor Color The color to use when
rendering text associated with
this transit line.
326
Name Type Description
providerInfo string Information about the provider
of this transit line data.
verboseName string The full name of this transit
line.
Example
<!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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
327
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set directions options
directionsManager.setRequestOptions({ routeMode:
Microsoft.Maps.Directions.RouteMode.transit});
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated',
displayMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'itineraryStepClicked',
displayStepMessage );
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
328
function displayError(e)
{
alert(e.message);
}
function displayMessage(e)
{
alert("Click a step in the itinerary to display extra transit information.");
}
function displayStepMessage(e)
{
if (e.step.iconType == Microsoft.Maps.Directions.IconType.bus )
{
alert("The name of the transit agency for this step is: " +
e.step.transitLine.agencyName + ". For information about this transit agency and transit
line, go to " + e.step.transitLine.agencyUrl + ".");
}
else
{
alert("The step that was clicked is not a transit step.");
}
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
329
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
TransitOptions Object
Contains extra options for transit routes.
Properties
Name Type Description
timeType TimeType The type of the time specified
in transitTime. The default
value is departure.
transitTime Date The transit time to use when
calculating the route. If this
property is set to null, the
current time is used.
Example
<!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;
var directionsManager = null;
330
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints and add them to the route
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Bellevue,
WA"});
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set departure time to be 4 hours from now
var timeToDepart = new Date();
timeToDepart.setTime(timeToDepart.getTime() + 14400000);
// Set directions options
directionsManager.setRequestOptions({ routeMode:
Microsoft.Maps.Directions.RouteMode.transit, transitOptions:{ transitTime: timeToDepart }
});
331
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when the directions are calculated
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
alert(e.message);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
Waypoint Class
Represents a route waypoint.
Constructor
332
Name Definition Description
Waypoint Waypoint(options:WaypointOptions) Initializes a new instance
of the Waypoint class.
Methods
Name Definition Return Value Description
clear clear() None Clears all
options
associated
with this
waypoint.
dispose dispose() None Releases any
resources
associated
with the
waypoint.
getAddress getAddress() string Returns the
address
associated
with the
waypoint.
getBusinessDetails getBusinessDetails() BusinessDetai
ls
Returns the
business
details
associated
with the
waypoint.
getDisambiguationContai
ner
getDisambiguationContainer() DOMElement Returns the
container
element for
the waypoint
disambiguatio
n list.
getDisambiguationResult getDisambiguationResult() Disambiguatio
n
Returns the
result of the
waypoint
geocoding
333
Name Definition Return Value Description
disambiguatio
n.
getLocation getLocation() Location Returns the
location of the
waypoint.
getPushpin getPushpin() Pushpin Returns the
custom
pushpin
associated
with this
waypoint, if
one has been
specified.
getShortAddress getShortAddress() string Returns the
short address
for the
waypoint.
isExactLocation isExactLocation() boolean Returns a
boolean
indicating
whether the
waypoint
location is the
exact
location.
isViapoint isViapoint() boolean Returns a
boolean value
indicating
whether the
waypoint is a
via point. A
via point is a
location that
your route is
guaranteed to
pass through.
There can be
multiple via
points
334
Name Definition Return Value Description
between two
stop points.
setOptions setOptions(options:WaypointOpti
ons)
None Sets options
for the
waypoint. For
these options
to take effect,
you must
recalculate
the route.
Events
Name Arguments Description
changed WaypointEventArgs Occurs when the any
properties of the waypoint
change or are updated.
geocoded WaypointEventArgs Occurs when a geocoding
request for the waypoints
address is made.
reverseGeocoded WaypointEventArgs Occurs when a reverse
geocoding request for the
waypoints location is made.
This happens when no
address is provided for the
waypoint, or if the waypoint
is dragged (in which case
its location is changed).
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
335
<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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle,
WA"});
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address:
"Microsoft" } );
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
336
// Set the id of the div to use to display the directions
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when an error occurs
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
// Display the error message
alert(e.message);
// If the error is a disambiguation error, display the results.
if (e.responseCode ==
Microsoft.Maps.Directions.RouteResponseCode.waypointDisambiguation)
{
SelectFirstDisambiguationResult();
}
}
function SelectFirstDisambiguationResult()
{
337
var results = "";
var waypoints = directionsManager.getAllWaypoints();
var recalculate = false;
var i = 0;
for (i=0; i<waypoints.length; i++)
{
var disambigResult = waypoints[i].getDisambiguationResult();
if (disambigResult != null)
{
// Reset the address to the first business or location suggestion
var firstAddress = disambigResult.businessSuggestions.length > 0 ?
disambigResult.businessSuggestions[0].address :
disambigResult.locationSuggestions[0].suggestion;
waypoints[i].setOptions({ address: firstAddress });
// Set the recalculate flag since the waypoint address was changed
recalculate = true;
}
}
if (recalculate)
{
directionsManager.calculateDirections();
}
}
</script>
338
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
WaypointEventArgs Object
Contains the arguments for route waypoint events.
Properties
Name Type Description
waypoint Waypoint The waypoint for which the
event occurred.
WaypointOptions Object
Contains waypoint options.
Properties
Name Type Description
address string The address string, business
name, or search string of the
waypoint. For example, the
following strings are valid for this
parameter: Seattle, Microsoft,
pizza, or pizza Seattle. Either
the address or location
property must be specified.
businessDetails BusinessDetails The business details of the
waypoint, if it is a business.
339
Name Type Description
disambiguationContainer DOMElement The DOM element inside which
the waypoint disambiguation list
will be rendered. If this property
is not set, the disambiguation list
is rendered inside the
itineraryContainer.
exactLocation boolean A boolean indicating whether the
waypoint location is the exact
location. The default value is
false.
isViapoint boolean A boolean indicating whether the
waypoint is a via point. A via
point is a point along the route
that is not a stop point. Set this
property to true if you just want
the route to pass through this
location. The default value is
false.
location Location The location of the waypoint.
Either the address or location
property must be specified.
pushpin Pushpin The custom pushpin to use to
represent this waypoint. This
property overrides any pushpin
options that apply to this
waypoint that have been set in
the DirectionsRenderOptions
Object.
shortAddress string The short address of the
waypoint.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
340
<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;
var directionsManager = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback:
directionsModuleLoaded });
}
function directionsModuleLoaded()
{
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ location: new
Microsoft.Maps.Location(47.5, -121.9) });
var viaWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: "1
Microsoft Way, Redmond, WA" , isViapoint: true });
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address:"Space
Needle" } );
341
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(viaWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set the id of the div to use to display the directions
directionsManager.setRenderOptions({ itineraryContainer:
document.getElementById('itineraryDiv') });
// Specify a handler for when an error and success occurs
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError',
displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e)
{
// Display the error message
alert(e.message);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<div id='itineraryDiv' style="position:relative; width:400px;"></div>
</body>
</html>
342
WaypointRenderEventArgs Object
Contains arguments for waypoint render events.
Properties
Name Type Description
containerElement object The DOM element which contains
the waypoint. You can use this
property to add custom content.
handled boolean A boolean indicating whether the
event is handled. This property is
only available for the
beforeWaypointRender event.
Set this property to true to override
the default behavior.
waypoint Waypoint The waypoint for which the event
occurred.
Microsoft.Maps.Overlays.Style Reference
This section contains reference documentation for the Microsoft.Maps.Overlays.Style module,
which allows you to access Bing Maps overlay styles.
Before you can access Microsoft.Maps.Overlays.Style styles, you must first load this
module using the loadModule method. Information about loading modules is in the
Module Loading Methods topic.
Navigation Bar Style
To load the new Bing Maps navigation bar, load the Microsoft.Maps.Overlays.Style module, then
set the customizeOverlays map option to true.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
343
<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;
Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', { callback: GetMap });
function GetMap()
{
var options = {credentials: "Bing Maps Key", center: new
Microsoft.Maps.Location(47.5, -122.3), zoom: 9, customizeOverlays: true }
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), options );
}
</script>
</head>
<body>
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>
</html>
Microsoft.Maps.Search API Reference
This section contains reference documentation for the Microsoft.Maps.Search API, which
contains types that allow you to return search and location results to display on your Bing Maps
344
AJAX Control 7.0 map. Use the methods geocode, reverseGeocode, and search found on the
SearchManager Class.
Before you can access the types found in the Microsoft.Maps.Search API, you must first
load this module using the loadModule method. Information about loading modules is in
the Module Loading Methods topic.
In This Section
Address Class
GeocodeLocation Class
GeocodeRequestOptions Object
GeocodeResult Class
LocationPrecision Enumeration
MatchCode Enumeration
MatchConfidence Enumeration
PlaceResult Class
ReverseGeocodeRequestOptions Object
SearchManager Class
SearchParseResult Class
SearchRegion Class
SearchRequestOptions Object
SearchResponse Class
SearchResponseSummary Class
SearchResult Class
Address Class (AJAX)
Represents an address.
Properties
Name Type Description
addressLine string The street line of an address.
The addressLine property is
the most precise, official line for
an address relative to the
postal agency servicing the
345
Name Type Description
area specified by the locality or
postalCode properties.
adminDistrict string The subdivision name within
the country or region for an
address. This element is also
commonly treated as the first
order administrative
subdivision. An example is a
US state, such as Oregon.
countryRegion string The country or region name of
the address.
district string The second, third, or fourth
order subdivision within a
country, dependency, or
region.
formattedAddress string The complete, unparsed
address.
locality string The locality, such as the
primary city, that corresponds
to an address. An example is
Seattle.
postalCode string The post code, postal code, or
ZIP code of an address. An
example is a US ZIP code,
such as 98152.
postalTown string The city or neighborhood that
corresponds to the postalCode.
GeocodeLocation Class (AJAX)
Represents a geocode location.
Properties
346
Name Type Description
location Location The map location of this
geocode location match.
name string The name of this geocode
location match.
precision LocationPrecision The precision of this geocode
location match.
GeocodeRequestOptions Object
Contains the options for a geocode request.
Properties
Name Type Description
bounds LocationRect A location rectangle that defines
the boundaries of the area in which
to search for location results. The
default is the bounds of the map
view associated with this instance
of the SearchManager, which is
usually the current map view.
callback function The name of the function to call
when a successful result is
returned from the geocode request.
The callback function must accept
two parameters: result, which is a
GeocodeResult type, and a
userData object.
count number The maximum number of results to
return. Required. The maximum
number than can be returned is 20.
errorCallback function The name of the function to call
when the request is returned with
an error. The error callback
function must accept a
347
Name Type Description
GeocodeRequestOptions object.
timeout number A number indicating how long to
wait, in seconds, for the geocode
request to return. The default value
is 5 seconds.
userData Object An object containing any data that
needs to be passed to the callback
when the request is completed.
where string A string containing the address or
place to be matched to a location
on the map. Required.
Example
<!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 Maps Key", center: new Microsoft.Maps.Location(47.5, -122.3), zoom: 9 });
348
Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback:
searchModuleLoaded });
}
function searchModuleLoaded()
{
var searchManager = new Microsoft.Maps.Search.SearchManager(map);
var geocodeRequest = {where:"1 Microsoft Way, Redmond, WA", count:10,
callback:geocodeCallback, errorCallback:errCallback};
searchManager.geocode(geocodeRequest);
}
function geocodeCallback(geocodeResult, userData)
{
alert("The first geocode result is " + geocodeResult.results[0].name + ".");
}
function errCallback(geocodeRequest)
{
alert("An error occurred.");
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>
</html>
349
See Also
SearchManager Class
GeocodeResult Class (AJAX)
Represents a geocoded result.
Properties
Name Type Description
parsedAddress Address The parsed address of the
input query.
parsedKeyword string The parsed keyword string of
the input query.
parsedSeparator string The parsed separator of the
input query.
results PlaceResult[] The geocoded results.
LocationPrecision Enumeration
Defines the match precision of a geocoded result.
Constants
Name Description
interpolated The geocoding service matched the location to
a point on the road using interpolation of
multiple geocoded sources.
rooftop The geocoding service matched the location to
the rooftop of a building.
350
MatchCode Enumeration
Defines the geocoding level of the location match found by the geocoder.
Constants
Name Description
none No match was found.
good The match was good.
ambiguous The match was ambiguous. Multiple results
were returned.
upHierarchy The match was found by a broader search.
modified The match was found, but possibly using a
modified query.
MatchConfidence Enumeration
Defines the confidence of the location match found by the geocoding service.
Constants
Name Description
high The confidence of the match is high.
medium The confidence of the match is medium.
low The confidence of the match is low.
unknown The confidence of the match is unknown.
PlaceResult Class
Represents a place result.
351
Properties
Name Type Description
bestView LocationRect The location rectangle that
defines the boundaries of
the best map view of the
place result.
location GeocodeLocation The geocoded location of
the best result.
locations GeocodeLocation[] The geocoded locations.
matchCode MatchCode The match code of the best
result.
matchConfidence MatchConfidence The match confidence of
the best result.
name string The name of the place
result, if one exists.
ReverseGeocodeRequestOptions Object
Contains options for a reverse geocode request.
Properties
Name Type Description
callback function The name of the function to call when a
successful result is returned from the
reverse geocode request. The callback
function must accept two parameters: a
result, which is a PlaceResult type, and
a userData object.
errorCallback function The name of the function to call when
the request is returned with an error.
The callback function must accept a
ReverseGeocodeRequestOptions
object.
352
Name Type Description
location Location The location to use to match to
geographic entities and addresses.
timeout number A number indicating how long to wait,
in seconds, for the reverse geocode
request to return. The default value is 5
seconds.
userData Object An object containing any data that
needs to be passed to the callback
when the request is completed.
Example
<!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 Maps Key", center: new Microsoft.Maps.Location(47.5, -122.3), zoom: 9 });
Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback:
searchModuleLoaded });
353
}
function searchModuleLoaded()
{
var searchManager = new Microsoft.Maps.Search.SearchManager(map);
var reverseGeocodeRequest = {location:new Microsoft.Maps.Location(47.5, -121.5),
count:10, callback:reverseGeocodeCallback, errorCallback:errCallback};
searchManager.reverseGeocode(reverseGeocodeRequest);
}
function reverseGeocodeCallback(result, userData)
{
alert("The first result is " + result.name + ".");
}
function errCallback(request)
{
alert("An error occurred.");
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>
</html>
See Also
SearchManager Class
354
SearchManager Class
Contains methods for returning search and location results.
Constructor
Name Definition Description
SearchManager SearchManager(map:Map) Initializes a new instance of
the SearchManager class.
Methods
Name Definition Retur
n
Value
Descriptio
n
geocode geocode(request:GeocodeRequestOptions Object) None Matches
the
address or
place
query in
the
specified
request
options to
a location
and
returns the
results to
the
request
options
callback
function.
reverseGeocod
e
reverseGeocode(request:ReverseGeocodeRequestOptio
ns Object)
None Matches
the
specified
location to
an
355
Name Definition Retur
n
Value
Descriptio
n
address
and
returns the
address
results to
the
specified
request
options
callback
function.
search search(request:SearchRequestOptions Object) None Performs
a search
based on
the
specified
request
options
and
returns the
results to
the
request
options
callback
function.
Example
<!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"/>
356
<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 Maps Key", center: new Microsoft.Maps.Location(47.5, -122.3), zoom: 9 });
Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback:
searchModuleLoaded });
}
function searchModuleLoaded()
{
var searchManager = new Microsoft.Maps.Search.SearchManager(map);
var searchRequest = {query:"pizza in Seattle, WA", count: 5,
callback:searchCallback, errorCallback:searchError};
searchManager.search(searchRequest);
}
function searchCallback(searchResponse, userData)
{
alert("The first search result is " + searchResponse.searchResults[0].name +
".");
}
357
function searchError(searchRequest)
{
alert("An error occurred.");
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>
</html>
SearchParseResult Class
Represents a search request parse result.
Properties
Name Type Description
keyword string The keyword of the input
query string.
location GeocodeLocation The geocoded location of
the input query string.
matchConfidence MatchConfidence The confidence of the
geocode match.
SearchRegion Class (AJAX)
Represents a search area.
Properties
358
Name Type Description
address Address The address of the center of
the search region.
geocodeLocations GeocodeLocation[] The geocoded locations.
explicitLocation GeocodeLocation The best geocoded
location.
mapBounds LocationRect A location rectangle that
defines the boundaries of
the search area.
matchCode MatchCode The match code of the
geocoded location.
matchConfidence MatchConfidence The match confidence of
the geocoded location.
source string A string indicating the
region used to infer the
location. The current values
are Query or MapView.
SearchRequestOptions Object
Contains options for a search request.
Properties
Name Type Description
callback function The name of the function to call
when a successful result is
returned from the search request.
The callback function must accept
two parameters: a result, which is
a SearchResponse, and a
userData object.
count number The maximum number of results to
return. Required. The maximum
number than can be returned is 20.
359
Name Type Description
errorCallback function The name of the function to call
when the request is returned with
an error. The callback function
must accept a
SearchRequestOptions object.
query string The search string, such as pizza
in Seattle, WA. Either query or
what/where needs to be specified.
If both are specified, an error
occurs.
startIndex number The index of the first result in the
results. For example, if you had
already returned a first set of 10
search results and now wanted to
return the second set of 10 results,
you would specify 10 as the
startIndex and 10 as the count.
timeout number A number indicating how long to
wait, in seconds, for the search
request to return. The default value
is 5 seconds.
entityType string The type of entities to find.
Currently only Business is
allowed.
userData Object An object containing any data that
needs to be passed to the callback
when the request is completed.
what string The business name, category, or
other item for which the search is
conducted. For example, pizza in
the search string pizza in Seattle.
where string The address or place name of the
area for which the search is
conducted. For example, Seattle
in the search string pizza in
Seattle.
360
Example
<!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 Maps Key", center: new Microsoft.Maps.Location(47.5, -122.3), zoom: 9 });
Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback:
searchModuleLoaded });
}
function searchModuleLoaded()
{
var searchManager = new Microsoft.Maps.Search.SearchManager(map);
var searchRequest = {what:"pizza", where:"Seattle", count:10,
callback:searchCallback, errorCallback:searchError};
searchManager.search(searchRequest);
361
}
function searchCallback(searchResponse, userData)
{
alert("The first search result is " + searchResponse.searchResults[0].name +
".");
}
function searchError(searchRequest)
{
alert("An error occurred.");
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>
</html>
See Also
SearchManager Class
SearchResponse Class (AJAX)
Represents the results of a search request.
Properties
Name Type Description
alternateSearchRegions SearchRegion[] An array of alternate
search regions.
hasMore boolean A boolean indicating
362
Name Type Description
whether there are more
results to return.
parseResults SearchParseResult[] An array containing the
parsed results of the
search.
responseSummary SearchResponseSummary The summary of the
response to the search
request.
searchRegion SearchRegion The region in which the
search was performed.
searchResults SearchResult[] A search result array
containing the search
results.
See Also
SearchManager Class
SearchResponseSummary Class
Contains properties that summarize the search service response to a request.
Properties
Name Type Description
authResultCode number The authentication result code.
copyright string The copyright string.
errorMessage string The error message, if an error
occurred.
statusCode number The status code of the request.
traceId number A string representing a trace ID
to enable debugging of the
request.
363
SearchResult Class
Represents a distinct search result.
Properties
Name Type Description
address Address The address of the search
result.
city string The city of the search result.
country string The country of the search
result.
entityType string The entity type of the search
result.
hoursOfOperation string The hours of operation of the
entity defined by the search
result.
id number The entity ID of the search
result.
location Location The location of the search
result.
name string The name of the entity
defined by the search result.
phone string The phone number of the
search result.
postalCode string The postal code of the search
result.
reviewCount number The number of user reviews
recorded for this search
result.
userRating number The average user rating for
the entity defined by the
search result.
website string The URL of the entity defined
by the search result.
364
Microsoft.Maps.Themes.BingTheme API
Reference
This section contains reference documentation for the Microsoft.Maps.Themes.BingTheme
module, which allows you to use the latest Bing Maps site design.
Before you can access the Microsoft.Maps.Themes.BingTheme functionality, you must
first load this module using the loadModule method. Information about loading modules
is in the Module Loading Methods topic.
BingTheme Features
When loaded, the Microsoft.Maps.Themes.BingTheme module updates certain visual aspects of
the map control with the latest Bing Maps design. To see the design changes, simply access the
corresponding API after loading the Microsoft.Maps.Themes.BingTheme module. The affected
map control features are listed below.
Map navigation bar The style, position, and size of the map navigation bar elements is
updated, including the map style drop-down, zoom, pan, and rotate controls.
Location bar The style, position, and size of the location bar, which describes the map
context (such as World), is updated.
Pushpins The style and behavior of pushpins are updated to match the Bing Maps site. This
includes the ability to associate a pushpin with an info box, pushpin hover and click behavior,
and pushpin color changes based on the current imagery. Also, a new pinmicro value is
available for the pushpin typeName option. For pushpin options you can set, see
PushpinOptions.
Polygons The style and behavior of polygons changes to match the latest Bing Maps
design. This includes providing info boxes for hover and click events.
Info boxes The style and behavior of info boxes are updated to match the Bing Maps site.
This includes the ability to associate an info box with a pushpin, info box styles for hover and
click events, and info box color changes based on the current imagery. For info box options
you can set, see InfoboxOptions.
Example
<!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"/>
365
<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()
{
Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', { callback:
themesModuleLoaded });
}
function themesModuleLoaded()
{
// Load the map using the Bing theme style.
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:
"Bing Maps Key", center: new Microsoft.Maps.Location(47.5, -122.3), zoom: 9, theme: new
Microsoft.Maps.Themes.BingTheme() });
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>
</html>
366
Additional Example: For an example of how to set pushpin options for a pushpin when using the
Microsoft.Maps.Themes.BingTheme, see the example in EntityState Enumeration.
Microsoft.Maps.Traffic API Reference
This section contains reference documentation for the Microsoft.Maps.Traffic API, which contains
types that allow you to display traffic on your Bing Maps AJAX Control 7.0 map.
Before you can access the types found in the Microsoft.Maps.Traffic API, you must first
load this module using the loadModule method. Information about loading modules is in
the Module Loading Methods topic.
In This Section
TrafficLayer Class (deprecated)
TrafficManager Class
TrafficLayer Class (deprecated)
This class is deprecated. Use the TrafficManager Class.
Represents a traffic layer on the map.
Constructor
Name Definition Description
TrafficLayer TrafficLayer(map:Map) Initializes a new instance of
the TrafficLayer class.
Methods
Name Definition Return Value Description
getTileLayer getTileLayer() TileLayer Returns the traffic
layer.
hide hide() None Hides the traffic layer.
367
Name Definition Return Value Description
show show() None Displays the traffic
layer.
Example
<!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 Maps Key", center: new Microsoft.Maps.Location(47.5, -122.3), zoom: 9 });
Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', { callback:
trafficModuleLoaded });
}
function trafficModuleLoaded()
{
368
var trafficLayer = new Microsoft.Maps.Traffic.TrafficLayer(map);
trafficLayer.show();
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>
</html>
TrafficManager Class
Contains methods that display traffic information on the map.
Constructor
Name Definition Description
TrafficManager TrafficManager(map: Map) Initializes a new instance of
the TrafficManager class.
Methods
Name Definition Return Value Description
hide hide() None Hides all traffic data.
hideFlow hideFlow() None Hides the traffic flow
layer.
hideIncidents hideIncidents() None Hides all traffic
incidents.
hideLegend hideLengend() None Hides the traffic
legend.
369
Name Definition Return Value Description
show show() None Displays all traffic
data.
showFlow showFlow() None Displays the traffic
flow layer.
showIncidents showIncidents() None Displays all traffic
incidents.
showLegend showLengend() None Displays the traffic
legend.
Example
<!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 Maps
Key", center: new
Microsoft.Maps.Location(47.5, -122.3), zoom: 9 });
370
Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', { callback:
trafficModuleLoaded });
}
function trafficModuleLoaded()
{
var trafficManager = new Microsoft.Maps.Traffic.TrafficManager(map);
trafficManager.show();
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>
</html>
Microsoft.Maps.VenueMaps API Reference
This section contains reference documentation for the Microsoft.Maps.VenueMaps API. Use the
VenueMapFactory Class to search for available venue maps.
Before you can access the types found in the Microsoft.Maps.VenueMaps API, you must
first load this module using the loadModule method. Information about loading modules
is in the Module Loading Methods topic.
In This Section
Directory Class
DirectoryGrouping Enumeration
DirectorySortOrder Enumeration
Floor Class
371
Footprint Class
Metadata Class
NearbyVenue Class
NearbyVenueOptions Object
Polygon Class
Primitive Class
VenueMap Class
VenueMapCreationOptions Object
VenueMapFactory Class
Directory Class
Represents a venue map directory, which is a list of businesses and features found within the
venue.
Methods
Name Definition Return
Value
Description
addToDOM addToDom(div:HTMLElement,
sortOrder:DirectorySortOrder,
to_group_or_not:DirectoryGrouping)
None Adds the venue
map directory to
the DOM
(document
object model).
The specified
div becomes the
parent element
of the venue
map directory.
This method
does nothing if
the
createUIElemen
ts is not called
first.
createUIElement
s
createUIElements() None Creates the
necessary UI
elements and
data structures
372
Name Definition Return
Value
Description
to visualize the
venue map
directory. After
this method is
called, use the
addToDOM
method to add
the elements to
the DOM.
handleMouseCli
ck
handleMouseClick(e:{eventArgs:MouseEventArg
s, Primitive})
None The base
method to call if
you override the
click event.
handleMouseOu
t
handleMouseMouseOut(e:{eventArgs:MouseEvent
Args, Primitive})
None The base
method to call if
you override the
mouseout
event.
handleMouseOv
er
handleMouseOver(e:{eventArgs:MouseEventArgs
, Primitive})
None The base
method to call if
you override the
mouseover
event.
isInDOM isInDOM() boolea
n
Returns a
boolean
indicating
whether the
venue map
directory is in the
DOM.
removeFromDO
M
removeFromDOM() None Removes the
venue map
directory from
the DOM. It is
recommended
that you use this
method to
remove the
373
Name Definition Return
Value
Description
venue map
directory from
the DOM instead
of using the
removeChild
method of the
DOM.
setHeight setHeight(h:int or double) None Sets the height
of the venue
map directory,
as a percentage
of the base
maps height or
in absolute
pixels. For
example, to set
the directory as
90% of the base
maps height,
call
setHeight(.9).
To set the height
as 800 pixels,
call
setHeight(800).
Events
Name Arguments Description
click eventArgs:MouseEventArgs,
Primitive
Occurs when the mouse is
used to click a list item in
the directory. If no handler
is specified for this event,
then the list item is
selected.
mouseout eventArgs:MouseEventArgs,
Primitive
Occurs when the mouse
cursor moves out of the
374
Name Arguments Description
area covered by a list item
in the directory. If no
handler is specified for this
event, then the highlight is
removed from the directory
list item.
mouseover eventArgs:MouseEventArgs,
Primitive
Occurs when the mouse is
over a list item in the
directory. If no handler is
specified for this event,
then the list item is
highlighted.
Example
<!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;
var venue = null;
var Events = null;
var clickhandler = null;
var mouseoverhandler = null;
var mouseouthandler = null;
function GetMap()
{
// Initialize the map
375
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Events = Microsoft.Maps.Events;
Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback:
venuemapsModuleLoaded });
}
function venuemapsModuleLoaded()
{
// Create the venue map
var vmaps = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
vmaps.create({venueMapId: 'bingmapsteam-bellevuesquare',
success:successCallback});
}
function successCallback(venueObj)
{
venue = venueObj;
map.setView(venue.bestMapView, true);
venue.show();
venue.directory.createUIElements();
addDirectory();
}
function addDirectory()
{
if (venue && venue.directory && !venue.directory.isInDOM())
{
var directory = venue.directory;
directory.addToDOM(document.getElementById('leftsidebar'),
Microsoft.Maps.VenueMaps.DirectorySortOrder.alphabetical,
Microsoft.Maps.VenueMaps.DirectoryGrouping.none);
directory.setHeight(1.0);
clickhandler = Events.addHandler(directory, 'click', clickHandler);
mouseoverhandler = Events.addHandler(directory, 'mouseover', mouseoverHandler);
376
mouseouthandler = Events.addHandler(directory, 'mouseout', mouseoutHandler);
}
}
function removeDirectory()
{
if (venue)
{
venue.directory.removeFromDOM();
Events.removeHandler(clickHandler);
Events.removeHandler(mouseoverHandler);
Events.removeHandler(mouseoutHandler);
}
}
function clickHandler(e)
{
var p = e.primitive;
venue.directory.handleMouseClick(e);// call base method
display('Clicked Store <br/>' +
'Name : ' + p.name + '<br/>' +
'Id: ' + p.id+ '<br/>' +
'YPId : ' + p.businessId + '<br/>' +
'Category Name : ' + p.categoryName + '<br/>' +
'Category Id : ' + p.categoryId + '<br/>' +
'Optimal Zoom: ' + p.optimalZoom(0.8) + '<br/>' +
'Floor: ' + p.floor.name + '<br/>' +
'Center : ' + p.center + '<br/>' +
'Coordinates : ' + p.locations + '<br/>' +
'Bounding Box: ' + p.bounds);
}
function mouseoverHandler(e)
{
377
var p = e.primitive;
venue.directory.handleMouseOver(e);// call base method
display('Mouse Over <br/>' +
'Name : ' + p.name + '<br/>' +
'Id: ' + p.id+ '<br/>' +
'YPId : ' + p.businessId + '<br/>' +
'Category Name : ' + p.categoryName + '<br/>' +
'Category Id : ' + p.categoryId + '<br/>' +
'Optimal Zoom: ' + p.optimalZoom(0.8) + '<br/>' +
'Floor: ' + p.floor.name + '<br/>' +
'Center : ' + p.center + '<br/>' +
'Coordinates : ' + p.locations + '<br/>' +
'Bounding Box: ' + p.bounds);
}
function mouseoutHandler(e)
{
var p = e.primitive;
venue.directory.handleMouseOut(e);// call base method
display('Mouse Out <br/>' +
'Name : ' + p.name + '<br/>' +
'Id: ' + p.id+ '<br/>' +
'YPId : ' + p.businessId + '<br/>' +
'Category Name : ' + p.categoryName + '<br/>' +
'Category Id : ' + p.categoryId + '<br/>' +
'Optimal Zoom: ' + p.optimalZoom(0.8) + '<br/>' +
'Floor: ' + p.floor.name + '<br/>' +
'Center : ' + p.center + '<br/>' +
'Coordinates : ' + p.locations + '<br/>' +
'Bounding Box: ' + p.bounds);
}
function display(html)
{
378
var e = document.getElementById('rightsidebar');
e.innerHTML = html;
}
</script>
</head>
<body onload="GetMap();">
<div id='leftsidebar' style="position:absolute; top:0px; left:0px; width:300px;"></div>
<div id='mapDiv' style="position:absolute; top:0px; left:310px; width:500px;
height:500px;"></div>
<div id='rightsidebar' style="position:absolute; top:0px; left:820px; width:300px;
height:500px;"></div>
<input style="position:absolute; top:520px; left:310px" type='button'
onclick='addDirectory();' value='Add Directory' />
<input style="position:absolute; top:520px; left:470px" type='button'
onclick='removeDirectory();' value='Remove Directory' />
</body>
</html>
DirectoryGrouping Enumeration
Contains constants that specify how listings in a venue map directory are grouped.
Constants
Name Description
byCategory The listings in the directory are grouped by
category.
none The listings in the directory are not grouped.
They are displayed in a flat list.
DirectorySortOrder Enumeration
Contains constants that specify the way a venue map directory is sorted.
379
Constants
Name Description
alphabetical The listings in the directory are sorted
alphabetically.
byFloor The listings in the directory are sorted by floor.
Floor Class
Represents one floor map of a venue map.
Properties
Name Type Description
name string The name of the floor.
primitives Primitive[] An array of Primitive objects
that represent the points of
interest (for example, stores)
on this venue floor.
zoomRange double[] An array of doubles indicating
the minimum and maximum
zoom levels where imagery is
available for this venue map
floor.
Example
<!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"/>
380
<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()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback:
venuemapsModuleLoaded });
}
function venuemapsModuleLoaded()
{
// Create the venue map
var vmaps = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
vmaps.create({venueMapId: 'bingmapsteam-bellevuesquare', success:ShowVenue,
error:ShowError});
}
function ShowVenue(venue)
{
// Set the map view
map.setView(venue.bestMapView);
381
venue.show();
DisplayVenueFloorInfo(venue);
}
function ShowError()
{
// Show an error
alert("An error occurred trying to create the venue map.");
}
function DisplayVenueFloorInfo(venue)
{
var floors = "Available floor maps for " + venue.name +":\n";
for(var i in venue.floors)
{
floors = floors + venue.floors[i].name + "\n";
}
// Display the floor info
alert(floors);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>
382
</body>
</html>
Footprint Class
Represents the footprint of the venue map.
Properties
Name Type Description
polygons Polygon[] The shapes that make up the
footprint of this venue.
zoomRange double[] An array of doubles indicating
the minimum and maximum
zoom levels where imagery is
available for this venue map.
Example
<!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()
{
383
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback:
venuemapsModuleLoaded });
}
function venuemapsModuleLoaded()
{
// Create the venue map
var vmaps = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
vmaps.create({venueMapId: 'bingmapsteam-bellevuesquare', success:ShowVenue,
error:ShowError});
}
function ShowVenue(venue)
{
// Set the map view
map.setView(venue.bestMapView);
venue.show();
DisplayVenueInfo(venue);
}
function ShowError()
{
// Show an error
alert("An error occurred trying to create the venue map.");
}
384
function DisplayVenueInfo(venue)
{
var venueinfo = "Venue: " + venue.name +"\n" + "Venue Map ID: " + venue.id +
"\n" + "Venue Map Type: " + venue.type + "\n" + "Default Floor: " + venue.defaultFloor +
"\n" + "Detail Level Range for Default Floor: " + venue.footprint.zoomRange + "\n";
// Display the venue info
alert(venueinfo);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>
</body>
</html>
Metadata Class
Contains information about a venue map.
Properties
Name Type Description
CenterLatitude number The latitude of the center
location of the venue map.
CenterLongitude number The longitude of the center
location of the venue map.
DefaultFloor string The ID of the default floor of
the venue map.
FloorHeader string A string used in the floor bar
of the venue map.
Floors Floor[] An array containing the floors
385
Name Type Description
of the venue map.
Footprint Footprint The footprint of the venue
map.
MapId string The unique ID of the venue
map.
MapType string A string describing the venue
map type (for example,
mall).
Name string The name of the venue map.
YpId string The Yellow Pages ID of the
venue.
Example
<!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()
{
// Initialize the map and set the view to a specific location
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key",
center: new Microsoft.Maps.Location(47.6,-122.3), zoom:11});
386
Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback:
venuemapsModuleLoaded });
}
function venuemapsModuleLoaded()
{
// Create the venue map
var vmaps = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
// Search for nearby venues
vmaps.getNearbyVenues({map: map, location: map.getCenter(), radius:10000,
callback:DisplayNearbyVenueCount});
}
function DisplayNearbyVenueCount(venues)
{
var displayResults = "Nearby venues with available venue maps:\n";
for (var i=0; i<venues.length; i++)
{
displayResults = displayResults + venues[i].metadata.Name + "\t" +
venues[i].distance/1000 + " km\n";
}
alert(displayResults);
}
387
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>
</body>
</html>
NearbyVenue Class
Defines a nearby venue map.
Properties
Name Type Description
distance double The distance, in meters, to the
venue.
metadata Metadata The venue map metadata.
Example
<!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;
388
function GetMap()
{
// Initialize the map and set the view to a specific location
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key",
center: new Microsoft.Maps.Location(47.6,-122.3), zoom:11});
Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback:
venuemapsModuleLoaded });
}
function venuemapsModuleLoaded()
{
// Create the venue map
var vmaps = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
// Search for nearby venues
vmaps.getNearbyVenues({map: map, location: map.getCenter(), radius:10000,
callback:DisplayNearbyVenueCount});
}
function DisplayNearbyVenueCount(venues)
{
var displayResults = "Nearby venues with available venue maps:\n";
for (var i=0; i<venues.length; i++)
{
displayResults = displayResults + venues[i].metadata.Name + "\t" +
venues[i].distance/1000 + " km\n";
}
389
alert(displayResults);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>
</body>
</html>
NearbyVenueOptions Object
Contains search options for retrieving nearby venue maps.
Properties
Name Type Description
callback function The function to call when the
search is completed. The
function must accept an array
of VenueMap objects.
location Location The center of the circle in which
to search for nearby venue
maps.
map Map The base map.
radius double The radius, in meters, of the
circle in which to search for
nearby venue maps.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
390
<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()
{
// Initialize the map and set the view to a specific location
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key",
center: new Microsoft.Maps.Location(47.6,-122.3), zoom:11});
Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback:
venuemapsModuleLoaded });
}
function venuemapsModuleLoaded()
{
// Create the venue map
var vmaps = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
// Search for nearby venues
vmaps.getNearbyVenues({map: map, location: map.getCenter(), radius:10000,
callback:DisplayNearbyVenueCount});
}
391
function DisplayNearbyVenueCount(venues)
{
alert("There are " + venues.length + " venue maps nearby.");
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>
</body>
</html>
Polygon Class (Venue Map)
Defines the shape of venue map entities.
Properties
Name Type Description
bounds LocationRect The rectangle that defines the
bounding box for the polygon.
center Location The center of the polygon.
locations Location[] The locations that define the
vertices of the polygon.
Primitive Class
Represents a venue map primitive, which represents a venue map entity.
392
Properties
Name Type Description
bounds LocationRect The rectangle that defines the
bounding box for the
primitive.
businessId string The Yellow Pages ID for the
entity.
categoryId string The Yellow Pages business
category ID for the entity.
categoryName string The Yellow Pages business
category name for the entity.
center Location The location of the center of
the primitive.
floor Floor The floor to which this
primitive belongs.
id string The unique ID of the entity.
locations Location[] An array of locations that
represent the vertices of the
primitive.
name string The name of the entity.
Methods
Name Definition Return Type Description
highlight highlight() None Highlights the
primitive.
unhighlight unhighlight() None Removes the
highlighting of the
primitive.
393
Example
<!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;
var vmaps = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback:
venuemapsModuleLoaded });
}
function venuemapsModuleLoaded()
{
// Create the venue map
var vmaps = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
vmaps.create({venueMapId: 'bingmapsteam-bellevuesquare', success:ShowVenue});
394
}
function ShowVenue(venue)
{
// Set the map view
map.setView(venue.bestMapView);
venue.show();
Microsoft.Maps.Events.addHandler(venue, 'click', DisplayVenueEntity);
alert("Click on the venue map to display entity info.");
}
function DisplayVenueEntity(e)
{
alert("The name of the store that was clicked is " + e.name + ".");
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>
</body>
</html>
395
VenueMap Class
Represents a venue map. An example of a venue map is a mall.
Properties
Name Type Description
address string The full address of the venue.
bestMapView ViewOptions The best map view of the
venue map.
businessId string The Yellow Pages ID for the
venue map.
center Location The location of the center of
the venue map.
defaultFloor string The floor that is displayed if
no floor is specified.
directory Directory The venue map directory,
which is a list of businesses
and features found within the
venue
floorHeader string The header for floors for this
venue map. For example, for
a mall the floor header would
be Level.
floors Floor[] An array, where each element
represents a floor of the
venue.
footprint Footprint The shapes that make up the
venue map.
id string The unique venue map ID.
name string The name of the venue
represented by the venue
map.
phoneNumber string The phone number for the
venue represented by the
venue map.
396
Name Type Description
type string The venue map type, such as
Mall.
Methods
Name Definition Return Type Description
dispose dispose() None Disposes the
venue map object.
getActiveFloor getActiveFloor() string Returns the venue
floor map that is
currently
displayed.
hide hide() None Hides the venue
map.
setActiveFloor setActiveFloor(floor:string) None Displays the floor
map for the
specified floor.
show show() None Displays the venue
map.
Events
Name Arguments Description
click eventArgs:Primitive Occurs when the mouse is
used to click the venue map.
close None Occurs when the close
button on the venue map is
clicked.
footprintclick eventArgs:Primitive Occurs when the detailed
map of the venue is clicked.
mouseout eventArgs:Primitive Occurs when the mouse
cursor moves out of the area
covered by the venue map.
397
Name Arguments Description
mouseover eventArgs:Primitive Occurs when the mouse
cursor is over the venue
map.
Example
<!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;
var venue = null;
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback:
venuemapsModuleLoaded });
}
function venuemapsModuleLoaded()
{
398
// Create the venue map
var vmaps = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
vmaps.create({venueMapId: 'bingmapsteam-bellevuesquare', success:SetVenue});
}
function SetVenue(venueObj)
{
venue = venueObj;
}
function ShowVenue()
{
// Set the map view
map.setView(venue.bestMapView);
venue.show();
}
function HideVenue()
{
venue.hide();
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>
399
<input type="button" value="Show Venue Map" onclick="ShowVenue()"/><input
type="button" value="Hide Venue Map" onclick="HideVenue()"/>
</body>
</html>
VenueMapCreationOptions Object
Contains options for creating a venue map.
Properties
Name Type Description
error function The function to call if the venue
map was not successfully
created. The function must
accept two parameters: an
integer which is an error code
and an object that contains the
arguments passed to the create
method of the VenueMapFactory.
The error codes are:
1 The metadata needed to
create the venue map was
not found because of a 404
or other web exception, or
because the metadata was
found but was empty.
2 The venue map metadata
is invalid.
3 A timeout has occurred
trying to retrieve the venue
map metadata.
success function The function to call if the venue
map was successfully created.
The function must accept two
parameters: a VenueMap and an
object that contains the
arguments passed to the create
method of the VenueMapFactory.
400
Name Type Description
venueMapId string A string that identifies the venue
map to display.
Example
<!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()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback:
venuemapsModuleLoaded });
}
function venuemapsModuleLoaded()
{
// Create the venue map
401
var vmaps = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
vmaps.create({venueMapId: 'bingmapsteam-bellevuesquare', success:ShowVenue,
error:ShowError});
}
function ShowVenue(venue)
{
// Set the map view
map.setView(venue.bestMapView);
venue.show();
}
function ShowError()
{
// Show an error
alert("An error occurred trying to create the venue map.");
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>
</body>
</html>
VenueMapFactory Class
Contains methods for creating a venue map.
Constructor
402
Name Definition Description
VenueMapFactory VenueMapFactory(map:Map) Initializes a new instance of
the VenueMapFactory class.
Methods
Name Definition Retur
n
Type
Description
create create(options:VenueMapCreationOptions) None Creates a venue map.
If the venue map is
created successfully, a
VenueMap is returned
to the function specified
in the success property
of the
VenueMapCreationOpti
ons.
You can display a
venue map using the
show method of the
VenueMap Class.
getNearbyVen
ues
getNearbyVenues(options:NearbyVenueMap
Options)
None Searches for venue
maps within a specified
distance. The callback
function must accept a
NearbyVenue array.
Example
<!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">
403
<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()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials:"Bing Maps Key"});
Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback:
venuemapsModuleLoaded });
}
function venuemapsModuleLoaded()
{
// Create the venue map
var vmaps = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
vmaps.create({venueMapId: 'bingmapsteam-bellevuesquare',
success:DisplayInfobox});
}
function DisplayInfobox(venue)
{
// Set the map view
map.setView(venue.bestMapView);
venue.show();
// Put an info box label on the map
mapCenter = map.getTargetCenter();
404
var venueinfobox = new Microsoft.Maps.Infobox(mapCenter, {title: venue.name,
showPointer: false, showCloseButton:false, height: 50, width: 180, offset:new
Microsoft.Maps.Point(-220, 150)});
map.entities.push(venueinfobox);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>
</body>
</html>
Bing Maps AJAX Control 7.0 Supported
Browsers
This topic contains information about browser support for the Bing Maps AJAX Control 7.0.
The Bing Maps AJAX Control 7.0 uses features of HTML5 if it detects that the client
browser supports HTML5. If this is the case, map performance will be faster, and map
animations and transitions will be smoother.
Supported Browsers
The Bing Maps AJAX Control 7.0 is supported on the following Web browsers. If you are not
using a supported Web browser, certain features of the map control may not work.
Desktop Browser Description
Internet Explorer 7.0 and later Supported on the PC
Firefox 3.6 and later Supported on the PC and the Mac
Safari 5 and later Supported on the Mac
Google Chrome Supported on the PC
405
Mobile Browser
Internet Explorer Mobile Browser
Apple iPhone Browser
Google Android Browser
Research in Motion (RIM) BlackBerry Browser
Release History for Bing Maps AJAX Control,
Version 7.0
The following release notes document updates to the Bing Maps AJAX Control 7.0.
Release Date Description
February 25, 2014 The following features were released in
preview:
You can display map labels in two
languages by specifying a primary and a
secondary language for the mkt parameter
in the map reference.
You can display map labels for each
country or region on the map in the local
language of that country or region by
specifying the custom language option ngt
Reference: Setting Map Control Parameters,
Localizing the Map
Notes include updates from February 25, 2014 onward.
Bing Maps AJAX Control 7.0 Developer
Resources
This topic contains support resources and contact information.
Developer Resources
The following resources are available for Bing Maps developers:
406
Check out the Bing Maps AJAX Control 7.0 Interactive SDK, which allows you to test out your
own map control code.
Connect with other Bing Maps developers on the Bing Maps AJAX Control Forum.
Visit the http://www.microsoft.com/maps website.
Read the Bing Maps Developer blog
Account Issues
If you are having issues creating a Bing Maps Developer Account, getting a Bing Maps Key, or
have an account access question, contact mpnet@microsoft.com.
Licensing Questions
If you are interested in finding out more about Bing Maps or have questions about licensing Bing
Maps, see the Bing Maps Licensing Tool.