P. 1
Bing Maps AJAX ControlSDK70

Bing Maps AJAX ControlSDK70

|Views: 152|Likes:
Published by cupidonq

More info:

Published by: cupidonq on May 15, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

07/27/2011

pdf

text

original

Sections

  • Bing Maps AJAX Control, Version 7.0
  • In This Section
  • See Also
  • Getting Started with the 7.0 Map Control
  • Create a Bing Maps Account and Get a Key
  • Get Familiar with the Bing Maps AJAX 7.0 Control
  • Developing with the 7.0 Map Control
  • Loading the AJAX Map Control
  • Displaying the Default Map
  • Customizing the Map When Loading
  • Example
  • Changing the Map View
  • Setting the Initial Map View
  • Adding Entities to the Map
  • Adding Single Entities to the Map
  • Adding a Pushpin
  • Adding a Shape
  • Adding Multiple Entities to the Map
  • Changing Entities on the Map
  • Displaying Location Search Results Using the REST Services
  • Initialize the Map
  • Add Controls
  • Make a Geocode REST Request
  • Display the Results
  • Getting Route Directions Using the REST Services
  • Construct the Route Request
  • Working with Tile Layers
  • Adding a Tile Layer
  • Returning a Localized Map
  • Setting the Culture
  • Supported Cultures
  • Bing Maps AJAX 7.0 Control API Reference
  • Data Structures
  • Mapping
  • Entities
  • AltitudeReference Enumeration
  • Constants
  • Methods
  • Color Class
  • Constructor
  • Properties
  • Static Methods
  • EntityCollection Class
  • Events
  • EntityCollectionOptions Object
  • Events Object
  • LabelOverlay Enumeration
  • Location Class (AJAX)
  • LocationRect Class
  • Map Class
  • MapOptions Object
  • MapTypeId Enumeration
  • MouseEventArgs Object
  • PixelReference Enumeration
  • Point Class
  • Polygon Class (AJAX)
  • PolygonOptions Object
  • Polyline Class
  • PolylineOptions Object
  • Pushpin Class (AJAX)
  • PushpinOptions Object
  • TileLayer Class
  • TileLayerOptions Object
  • TileSource Class
  • TileSourceOptions Object
  • ViewOptions Object
  • Bing Maps AJAX Control 7.0 Supported Browsers
  • Supported Browsers
  • Bing Maps AJAX Control 7.0 Developer Resources
  • Developer Resources
  • Account Issues
  • Licensing Questions

Contents

Bing Maps AJAX Control, Version 7.0 ............................................................................................. 5 In This Section.............................................................................................................................. 5 See Also ....................................................................................................................................... 5 Getting Started with the 7.0 Map Control ........................................................................................ 5 Create a Bing Maps Account and Get a Key ............................................................................... 5 Get Familiar with the Bing Maps AJAX 7.0 Control ..................................................................... 6 Developing with the 7.0 Map Control............................................................................................... 6 In This Section.............................................................................................................................. 6 Loading the AJAX Map Control ....................................................................................................... 6 Displaying the Default Map .......................................................................................................... 6 Customizing the Map When Loading ........................................................................................... 8 Example ....................................................................................................................................... 8 Changing the Map View .................................................................................................................. 9 Setting the Initial Map View .......................................................................................................... 9 Changing the Map View ............................................................................................................. 10 Adding Entities to the Map ............................................................................................................. 12 Adding Single Entities to the Map .............................................................................................. 12 Adding a Pushpin .................................................................................................................... 12 Adding a Shape ...................................................................................................................... 14 Adding Multiple Entities to the Map ............................................................................................ 15 Changing Entities on the Map .................................................................................................... 16 Displaying Location Search Results Using the REST Services .................................................... 19 Initialize the Map ........................................................................................................................ 19 Add Controls ............................................................................................................................... 20 Make a Geocode REST Request ............................................................................................... 20 Display the Results..................................................................................................................... 21 Getting Route Directions Using the REST Services ...................................................................... 24 Initialize the Map ........................................................................................................................ 24 Construct the Route Request ..................................................................................................... 25 Display the Results..................................................................................................................... 25 Working with Tile Layers ............................................................................................................... 28 Adding a Tile Layer .................................................................................................................... 28 Returning a Localized Map ............................................................................................................ 30

Setting the Culture...................................................................................................................... 30 Supported Cultures .................................................................................................................... 30 Bing Maps AJAX 7.0 Control API Reference ................................................................................ 31 In This Section............................................................................................................................ 31 Data Structures ....................................................................................................................... 31 Mapping .................................................................................................................................. 31 Entities .................................................................................................................................... 31 AltitudeReference Enumeration ..................................................................................................... 32 Constants ................................................................................................................................... 32 Methods ...................................................................................................................................... 32 Color Class .................................................................................................................................... 32 Constructor ................................................................................................................................. 32 Properties ................................................................................................................................... 33 Static Methods............................................................................................................................ 33 Methods ...................................................................................................................................... 33 EntityCollection Class .................................................................................................................... 34 Constructor ................................................................................................................................. 34 Methods ...................................................................................................................................... 34 Events ........................................................................................................................................ 36 EntityCollectionOptions Object ...................................................................................................... 37 Properties ................................................................................................................................... 37 Events Object ................................................................................................................................ 38 Methods ...................................................................................................................................... 38 LabelOverlay Enumeration ............................................................................................................ 39 Constants ................................................................................................................................... 39 Methods ...................................................................................................................................... 39 Location Class (AJAX) ................................................................................................................... 39 Constructor ................................................................................................................................. 40 Properties ................................................................................................................................... 40 Static Methods............................................................................................................................ 40 Methods ...................................................................................................................................... 41 LocationRect Class ........................................................................................................................ 41 Constructor ................................................................................................................................. 41 Properties ................................................................................................................................... 41 Static Methods............................................................................................................................ 41 Methods ...................................................................................................................................... 42

Map Class ...................................................................................................................................... 44 Constructor ................................................................................................................................. 44 Properties ................................................................................................................................... 44 Methods ...................................................................................................................................... 44 Events ........................................................................................................................................ 48 MapOptions Object ........................................................................................................................ 49 Properties ................................................................................................................................... 49 MapTypeId Enumeration ............................................................................................................... 51 Constants ................................................................................................................................... 51 Example ..................................................................................................................................... 52 See Also ..................................................................................................................................... 52 MouseEventArgs Object ................................................................................................................ 53 Properties ................................................................................................................................... 53 Methods ...................................................................................................................................... 53 PixelReference Enumeration ......................................................................................................... 54 Constants ................................................................................................................................... 54 Methods ...................................................................................................................................... 54 Point Class ..................................................................................................................................... 54 Constructor ................................................................................................................................. 55 Properties ................................................................................................................................... 55 Static Methods............................................................................................................................ 55 Methods ...................................................................................................................................... 55 Polygon Class (AJAX) ................................................................................................................... 56 Constructor ................................................................................................................................. 56 Methods ...................................................................................................................................... 56 Events ........................................................................................................................................ 57 PolygonOptions Object .................................................................................................................. 58 Properties ................................................................................................................................... 58 Polyline Class ................................................................................................................................ 58 Constructor ................................................................................................................................. 59 Methods ...................................................................................................................................... 59 Events ........................................................................................................................................ 60 PolylineOptions Object .................................................................................................................. 61 Properties ................................................................................................................................... 61 Pushpin Class (AJAX) ................................................................................................................... 61 Constructor ................................................................................................................................. 61

............................................................................................................................. 64 TileLayer Class ........................................................................................................................................................ 66 Properties .................................................. 67 Methods ....................................... 69 Properties ........................................ 70 Account Issues .................................................................................. 64 Properties .................................................................................................................................................................0 Developer Resources ........................................................................ 71 Licensing Questions ............................................................................................................................................................................... 71 .......... 70 Developer Resources ........................................................................................................................... 69 Bing Maps AJAX Control 7................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................. 68 Properties ..................................... 70 Supported Browsers .................................................................................................................................................................................................................. 67 TileSource Class............................................................................................................................. 67 Constructor .................................................................................................................................................................................................................. 69 ViewOptions Object ................................................................................ 66 TileLayerOptions Object .............................................................................................................................. 67 TileSourceOptions Object .................... 66 See Also ............................................................. 65 Constructor ................................. 67 See Also ................................... 70 Bing Maps AJAX Control 7........................................................................................................................................................................Methods ........................................................................................ 63 PushpinOptions Object .............. 65 Methods ........................................................................................................................................................................ 61 Events ..............................................0 Supported Browsers ........................................................................................... 68 See Also ................................................................................................... 65 See Also .............................

0 is a JavaScript control that contains the objects. In This Section      Getting Started with the 7. Getting a key is described in Getting a Bing Maps Key. The Bing Maps AJAX Control 7.0 software development kit (SDK) consists of a complete set of reference topics that cover the Bing Maps AJAX Control 7. you can download either the CHM or PDF version of this SDK for offline viewing.0. and low-angle high-resolution aerial photos. If you are reading this help file online. 5 . and events that allow you to display maps powered by Bing Maps on your Web site. you need to create a developer account on the Bing Maps Account Center. and share information about specific locations. The sections in this topic describe the steps you need to take to start using the Bing Maps AJAX Control 7.0 Map Control Developing with the 7. methods. By using enhanced road maps. explore.0 Map Control API Reference Supported Browsers Developer Resources See Also Terms and Conditions Getting Started with the 7. Version 7. A Bing Maps Developer Account allows you to create a Bing Maps Key to use in your map application. Bing Maps provides unique opportunities for developers to incorporate both location and local search features into their Web applications. plan.Bing Maps AJAX Control.0 application programming interface (API).0 Bing Maps™ is an online mapping service that enables users to search. labeled aerial photo views. discover. Create a Bing Maps Account and Get a Key Before you begin developing your application.0 Map Control The Bing Maps AJAX Control 7.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. Bing Maps counts sessions. Detailed information about Bing Maps usage reports is found in Viewing Bing Maps Usage Reports.When the Bing Maps AJAX Control 7. 6 . At the top of the HTML page add the following DOCTYPE declaration. as follows.org/TR/xhtml1/DTD/xhtml1-transitional. Get Familiar with the Bing Maps AJAX 7.dtd"> 2.0 Map Control section of this SDK contains topics that describe how to use the features provided by the AJAX map control. which includes all of the navigation functionality.0 Control The Developing with the 7.w3. In the header section of an HTML page.0.0 interactions until the browser is closed or the user moves to a different page. Developing with the 7.0 is loaded with a valid Bing Maps Key. A session begins with the load of the Bing Maps AJAX Control 7. This is the first step you need to take for any page that uses the map control.0 Map Control The topics in this section will help you to start using the Bing Maps AJAX Control 7.0 Transitional//EN" "http://www.0 into a user‟s browser and includes all Bing Maps AJAX Control 7. In This Section        Loading the AJAX Map Control Changing the Map View Adding Entities to the Map Displaying Location Search Results Using the REST Services Getting Route Directions Using the REST Services Working with Tile Layers Returning a Localized Map Loading the AJAX Map Control This topic describes how to load the Bing Maps AJAX Control 7. add a META element with the charset attribute set to "utf-8". Displaying the Default Map Displaying the default map. consists of the following steps: 1.0 into your Web page to display a map.

which is your Bing Maps Key. add a reference to the map control. 3. In the body of the page. <div id="mapDiv" class="map"></div> If you do not specify a width/height. {credentials:"Your Bing Maps Key"}). width:400px. top: 20. as follows. 7 ."></div> or . You can set these values either inline or by defining the values in a style class and then referencing that class. } . 5.dev. The position of the map is set by using the "position". See the Getting a Bing Maps Key topic. var map = new Microsoft.Maps. height: 400px. Finally. "top".<meta http-equiv="Content-Type" content="text/html.getElementById("mapDiv"). you should always specify the position attribute (both "absolute" and "relative" are valid values). <div id='mapDiv' style="position:absolute. <script charset="UTF-8" type="text/javascript" src="http://ecn.net/mapcontrol/mapcontrol. add a DIV element to the page to contain the map. For crossbrowser compatibility. charset=utf8"> It is recommended that you use UTF-8 encoding in your web page.. create a new instance of the Map Class. width: 400px. it is the percentage of the parent width or height.map { position: absolute. respectively.ashx? v=7. as follows. left: 10.Map(document. You also need to include a map options object to contain your credentials. Also in the header section.virtualearth. If you use a percentage width and or height in the map DIV. The size of the map is defined by the height and width of the DIV element. and "left" properties..0"> </script> 4. height:400px. the width/height of the div is used. border:#555555 2px solid.

Maps.aerial } var map = new Microsoft. Valid map types are found in the MapTypeId Enumeration topic.0"></script> <script type="text/javascript"> function GetMap() { var map = new Microsoft.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html.getElementById("mapDiv").MapTypeId.Map(document. } 8 .ashx?v=7. The code below sets the imagery to Aerial.virtualearth. -122. zoom level. Example The following code shows a complete Web page that loads a map.road. var mapOptions = { credentials: "Your Bing Maps Key".Maps.Maps.Maps.Location(45. pass in MapOptions to the Map constructor.Map(document. zoom: 7}). such as the location. To do this.dev. {credentials: "Your Bing Maps Key". center: new Microsoft.org/TR/xhtml1/DTD/xhtml1-transitional.net/mapcontrol/mapcontrol. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. mapTypeId: Microsoft.0 Transitional//EN" "http://www. mapTypeId: Microsoft.w3.MapTypeId.getElementById("mapDiv").Maps. charset=utf-8"> <script type="text/javascript" src="http://ecn.5. mapOptions).Customizing the Map When Loading You can also specify other options when the map is first loaded. and the imagery of the map.5).

width:400px.net/mapcontrol/mapcontrol.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html.</script> </head> <body onload="GetMap(). -122. zoom: 17. The imagery displayed is set to Bird‟s eye using the mapTypeId option. 9 .w3. charset=utf-8"> <script type="text/javascript" src="http://ecn. Setting the Initial Map View You can set the map view when you first load the map you can use any of the options available in the MapOptions Object or ViewOptions Object.dev."> <div id='mapDiv' style="position:relative. center: new Microsoft.0"></script> <script type="text/javascript"> function GetMap() { var mapOptions = { credentials: "Your Bing Maps Key".Maps. Valid map type IDs are listed in the MapTypeId Enumeration topic.birdseye. height:400px.MapTypeId.Maps.org/TR/xhtml1/DTD/xhtml1-transitional.ashx?v=7.0 Transitional//EN" "http://www. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Location(47.virtualearth.592."></div> </body> </html> Changing the Map View This topic describes how to change the map that is displayed. mapTypeId: Microsoft.332). The code below initializes the map with a specific view.

Maps. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.w3. The example below sets the map view to the specified zoom level. function GetMap() { map = new Microsoft.getElementById("mapDiv"). {credentials: "Your Bing Maps Key".virtualearth. mapOptions)."> <div id='mapDiv' style="position:relative.Map(document.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html.showScalebar: false } var map = new Microsoft. width:600px. use the setView method of the Map Class.org/TR/xhtml1/DTD/xhtml1-transitional. } </script> </head> <body onload="GetMap(). 10 . mapTypeId: Microsoft. The ViewOptions Object contains available options that can be set.MapTypeId.ashx?v=7. height:600px.getElementById("mapDiv").Maps.Map(document."></div> </body> </html> Changing the Map View If you want to change the map after it has loaded.road}).dev.0 Transitional//EN" "http://www.Maps. charset=utf-8"> <script type="text/javascript" src="http://ecn.net/mapcontrol/mapcontrol.0"></script> <script type="text/javascript"> var map = null.

setView({zoom:zoomLevel})."/> </body> </html> To set the boundaries of the view instead of centering on a point."> <div id='mapDiv' style="position:relative. } </script> </head> <body onload="GetMap(). width:500px.0"></script> <script type="text/javascript"> var map = null.value).0 Transitional//EN" "http://www.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html.org/TR/xhtml1/DTD/xhtml1-transitional. charset=utf-8"> <script type="text/javascript" src="http://ecn.} function SetZoom() { var zoomLevel = parseInt(document.virtualearth."></div> Zoom Level: <input id="txtZoom" type="text" value="1"/> <input id="btnZoom" type="button" value="Click to set the zoom level" onclick="SetZoom(). map. use the bounds option as shown in the code below.w3. height:500px.net/mapcontrol/mapcontrol.ashx?v=7.getElementById('txtZoom'). 11 .dev. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

Location(47.function GetMap() { map = new Microsoft.347584). Polyline.Maps."></div> </body> </html> Adding Entities to the Map This topic describes how to add entities to the map. new Microsoft.Location(47. polygon.LocationRect. -122. Adding Single Entities to the Map To add a pushpin. or polyline to the map. simply create your object then add the entity to the entities property of the map. 122. } </script> </head> <body onload="GetMap().622052.Maps. {credentials: "Your Bing Maps Key"}).Maps.347618). new Microsoft.Location(47."> <div id='mapDiv' style="position:relative. width:500px. map.618594.Map(document.getElementById("mapDiv").620700. 12 . TileLayer. var viewBoundaries = Microsoft. Information about working with tile layers is in the Working with Tile Layers topic. or EntityCollection.345869)).setView({ bounds: viewBoundaries}).fromLocations(new Microsoft. -122.Maps. An Entity can be any one of the following types: Polygon. Pushpin. height:500px.Maps. Adding a Pushpin The following code adds a pushpin to the center of the map with the label “1”.

"></div> </body> </html> 13 .net/mapcontrol/mapcontrol. {credentials:"Your Bing Maps Key"}).org/TR/xhtml1/DTD/xhtml1-transitional.Pushpin(center. {text: '1'}).getCenter().ashx?v=7.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html.entities.push(pin).Map(document. } </script> </head> <body onload="GetMap(). // Retrieve the location of the map center var center = map.getElementById("mapDiv"). height:400px. charset=utf-8"> <script type="text/javascript" src="http://dev. map.w3. // Add a pin to the center of the map var pin = new Microsoft.virtualearth."> <div id='mapDiv' style="position:relative.Maps.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0"></script> <script type="text/javascript"> function GetMap() { // Initialize the map var map = new Microsoft. width:400px.Maps.0 Transitional//EN" "http://www.

20).Maps.{fillColor: polygoncolor.0"></script> <script type="text/javascript"> function GetMap() { // Initialize the map var map = new Microsoft. var polygon = new Microsoft.Location(-20.100.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html.0 Transitional//EN" "http://www.push(polygon). create your shape then add it to the entities property of the map.entities.ashx?v=7. new Microsoft.Location(20.Color(100.Location(-20. charset=utf-8"> <script type="text/javascript" src="http://dev. // Create a polygon var vertices = new Array(new Microsoft.virtualearth. var polygoncolor = new Microsoft. new Microsoft.Adding a Shape To add a polyline or a polygon.-20). strokeColor: polygoncolor}).-20).Location(20. // Add the polygon to the map map. First.0.Maps.Maps.Maps.Polygon(vertices.net/mapcontrol/mapcontrol.org/TR/xhtml1/DTD/xhtml1-transitional.Location(20.Maps.getElementById("mapDiv").100).Maps.Maps.{credentials:"Your Bing Maps Key"}).Maps. } </script> 14 . <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. new Microsoft.Map(document. The following code adds a purple polygon to the map.-20)).20).w3. use the same method used to add a pushpin. new Microsoft.

w3.Maps. first create an EntityCollection then add this collection to the map. var location4 = new Microsoft."></div> </body> </html> Adding Multiple Entities to the Map If you want to add multiple entities to the map at one time. // Create a polygon 15 . The code below adds a polygon with pushpins at its corners.0 Transitional//EN" "http://www.Location(-20.20).Maps.dev. charset=utf-8"> <script type="text/javascript" src="http://ecn.virtualearth. height:400px.0"></script> <script type="text/javascript"> function GetMap() { // Initialize the map var map = new Microsoft. var location3 = new Microsoft.Maps. {credentials:"Your Bing Maps Key"})."> <div id='mapDiv' style="position:relative.org/TR/xhtml1/DTD/xhtml1-transitional.net/mapcontrol/mapcontrol.Maps.20).-20).Location(20.Maps.getElementById("mapDiv").ashx?v=7.Location(-20.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html.Location(20.</head> <body onload="GetMap(). var location2 = new Microsoft. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.-20).Map(document. width:400px. // Create the locations var location1 = new Microsoft.

strokeColor: polygoncolor}).push(new Microsoft.Maps.EntityCollection(). polygonWithPins.0.Pushpin(location2)). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Maps.0 Transitional//EN" "http://www.Pushpin(location1)).Maps.push(new Microsoft.Polygon(vertices. you can use the methods of the map entities collection to change and manipulate those entities.org/TR/xhtml1/DTD/xhtml1-transitional. polygonWithPins. location4.entities. location3. var polygon = new Microsoft. The code implements a button to change the color of a shape on the map. polygonWithPins.var vertices = new Array(location1. var polygoncolor = new Microsoft.Maps. // Add the shape to the map map. polygonWithPins.Maps.100)."></div> </body> </html> Changing Entities on the Map Once entities have been added to the map.100.push(polygon).push(polygonWithPins) } </script> </head> <body onload="GetMap(). height:400px.push(new Microsoft.push(new Microsoft. // Create the entity collection with the polygon and pushpins at each corner var polygonWithPins = new Microsoft.dtd"> <html> <head> <title></title> 16 .Pushpin(location4)).{fillColor: polygoncolor. polygonWithPins.Color(100."> <div id='mapDiv' style="position:relative.Pushpin(location3)). location1).Maps. location2.w3. width:400px.Maps.

Maps. var green = new Microsoft. // Create the locations var location1 = new Microsoft. var location2 = new Microsoft.Location(-20.Polygon(triangleVertices. 200).Color(100. -20). 100). 100).0"></script> <script type="text/javascript"> var map = null.Maps. 100.Color(100. 0. location5. // Create some shapes var triangleVertices = new Array(location1.Location(20. 0).Map(document.virtualearth.20). strokeColor: blue }).dev. charset=utf-8"> <script type="text/javascript" src="http://ecn. 17 .{credentials:"Your Bing Maps Key"}). function GetMap() { // Initialize the map map = new Microsoft.Maps. var triangle = new Microsoft.Maps. var location5 = new Microsoft.net/mapcontrol/mapcontrol.Location(-20. location2.<meta http-equiv="Content-Type" content="text/html. { fillColor: blue. var location3 = new Microsoft.getElementById("mapDiv"). var location4 = new Microsoft. 0.Maps. 0.Maps.Location(40.Maps.ashx?v=7.Location(20.Maps.-20). var purple = new Microsoft. // Define colors var blue = new Microsoft.Color(100. location1). 0. 100.Maps.20).Maps.

"></div> 18 . location1).entities.var squareVertices = new Array(location1. map. strokeColor:purple}). } function ChangePolygonColor() { // Get the map square entity.getLength()-1). strokeColor:purple})."> <div id='mapDiv' style="position:relative.entities. } } </script> </head> <body onload="GetMap(). height:400px. var mapSquare = map.setOptions({fillColor:purple. strokeColor:green}).{fillColor: purple.push(triangle).setOptions({fillColor: green.entities. if((currentColor.entities. location4. // Add the shapes to the map map.toString()) == (purple.getFillColor(). } else { // Change it back to purple mapSquare. location3. location2. width:400px. We know square was the last entity added.push(square). // Get the current color var currentColor = mapSquare.toString())) { // Change it to green mapSquare.get(map.Maps. // so we can calculate the index.Polygon(squareVertices. var square = new Microsoft.

19 . function GetMap() { // Initialize the map map = new Microsoft. charset=utf-8"> <script type="text/javascript" src="http://ecn.net/mapcontrol/mapcontrol. initialize the map using the following code.org/TR/xhtml1/DTD/xhtml1-transitional.0 does not have built in functionality to return find results.Map(document. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.{credentials:"Your Bing Maps Key". Initialize the Map Before you add geocoding functionality. version 7.virtualearth. but you can easily use the Bing Maps REST Services to geocode locations that you can then display on the map.ashx?v=7.getElementById("mapDiv")."/> </body> </html> Displaying Location Search Results Using the REST Services The Bing Maps AJAX Control. mapTypeId:"r"}).<input id="btnChangeColor" type="button" value="Change Polygon Color" onclick="ChangePolygonColor().dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html.0"></script> <script type="text/javascript"> var map = null.dev.w3.Maps.0 Transitional//EN" "http://www.

since you do not know if the text provided is a place name or an address. The Bing Maps REST Services can return an XML or JSON response object. width:400px. In this sample the callback function is named GeocodeCallback. create a ClickGeocode function that is called when the button is clicked. so set output=JSON. <input id="txtQuery" type="text" value="Portland"/> <input type="button" value="Geocode" onclick="ClickGeocode()"/> Since the Bing Maps REST Services also require a Bing Maps Key."> <div id='mapDiv' style="position:relative. function ClickGeocode(credentials) { map.getCredentials(MakeGeocodeRequest). Your REST geocode request looks like this: 20 ."></div> </body> </html> Add Controls For this sample. For JavaScript code. } Make a Geocode REST Request Next. make a geocode request to the Bing Maps REST Services using the value in the txtQuery input box and the credentials. Use the getCredentials method of the Map Class to do this.} </script> </head> <body onload="GetMap(). supply the locationQuery parameter and set it to the value of the txtQuery text box. Finally. add a text box and a Geocode button. JSON is more appropriate. In your script. height:400px. This means that you need to also set a jsonp callback function name. The getCredentials method takes a function to call when the credentials are retrieved. you need to first retrieve the key from the map object to ensure the session is valid.

add code to the GeocodeCallback function to set the map view to the found location and add a pushpin at that location.getElementById('txtQuery').0 Transitional//EN" "http://www.org/TR/xhtml1/DTD/xhtml1-transitional. "text/javascript"). script. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.net/REST/v1/Locations/" + document. } function GeocodeCallback(result) { // Do something with the result } Display the Results Finally. document.value + "?output=json&jsonp=GeocodeCallback&key=" + credentials.getElementById('txtQuery'). CallRestService(geocodeRequest).var geocodeRequest = "http://dev. function MakeGeocodeRequest(credentials) { var geocodeRequest = "http://dev.value + "?output=json&jsonp=GeocodeCallback&key=" + credentials. Now add script to make the REST request.setAttribute("type".body. request). charset=utf-8"> 21 . } function CallRestService(request) { var script = document.appendChild(script).createElement("script"). script.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html.virtualearth. The final code is shown below.setAttribute("src".virtualearth.net/REST/v1/Locations/" + document.w3.

Map(document. } function MakeGeocodeRequest(credentials) { var geocodeRequest = "http://dev. } function GeocodeCallback(result) { alert("Found location: " + result. mapTypeId:"r"}).ashx?v=7.0"></script> <script type="text/javascript"> var map = null.getCredentials(MakeGeocodeRequest).getElementById('txtQuery').dev.Maps. 22 .net/REST/v1/Locations/" + document.virtualearth.resourceSets[0].name).virtualearth. function GetMap() { // Initialize the map map = new Microsoft.net/mapcontrol/mapcontrol. CallRestService(geocodeRequest).<script type="text/javascript" src="http://ecn.{credentials:"Your Bing Maps Key".value + "?output=json&jsonp=GeocodeCallback&key=" + credentials.resources[0].getElementById("mapDiv"). } function ClickGeocode(credentials) { map.

new Microsoft.bbox.if (result && result.resourceSets && result.resources[0].setView({ bounds: viewBoundaries}).setAttribute("type". document.LocationRect.Location(result.appendChild(script).Pushpin(location).Location(bbox[2].setAttribute("src".Maps.coordinates[1]). bbox[1]). } } function CallRestService(request) { var script = document."> 23 . } </script> </head> <body onload="GetMap().entities. var pushpin = new Microsoft.point. script.fromLocations(new Microsoft.createElement("script").push(pushpin).body.Maps.resourceSets[0]. result. // Add a pushpin at the found location var location = new Microsoft.Location(bbox[0].Maps.resources[0]. script.Maps.resources && result.resourceSets[0].resourceSets[0]. map. bbox[3])).resourceSets.length > 0 && result.length > 0) { // Set the map view using the returned bounding box var bbox = result.coordinates[0].point.resources[0].resources.resourceSets[0].resourceSets[0].Maps. "text/javascript"). request). map. var viewBoundaries = Microsoft.

w3.Maps. charset=utf-8"> <script type="text/javascript" src="http://ecn.dev. height:400px. 24 .{credentials:"Your Bing Maps Key".net/mapcontrol/mapcontrol. width:400px. but you can easily use the Bing Maps REST Services to calculate a route and display it on the map.virtualearth.ashx?v=7.getElementById("mapDiv").org/TR/xhtml1/DTD/xhtml1-transitional."></div> <input id="txtQuery" type="text" value="Portland"/> <input type="button" value="Geocode" onclick="ClickGeocode()"/> </body> </html> Getting Route Directions Using the REST Services The Bing Maps AJAX Control.<div id='mapDiv' style="position:relative. initialize the map using the following code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 does not have built in route functionality. function GetMap() { // Initialize the map map = new Microsoft. mapTypeId:"r"}). version 7. Initialize the Map Before you add route functionality.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html.Map(document.0"></script> <script type="text/javascript"> var map = null.0 Transitional//EN" "http://www.

"> <div id='mapDiv' style="position:relative.value + "&routePathOutput=Points&output=json&jsonp=RouteCallback&key=" + credentials."></div> </body> </html> Construct the Route Request Next.} </script> </head> <body onload="GetMap(). The final code is shown below. width:400px. var routeRequest = "http://dev. construct the REST route request using the input values.getElementById('txtEnd').0=" + document.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html.value + "&wp.net/REST/v1/Routes?wp. Add two text boxes and a button to initiate the route calculation.w3. add code to make the route request when the button is clicked.getElementById('txtStart'). <input id="txtStart" type="text" value="Seattle"/> <input id="txtEnd" type="text" value="Portland"/> <input type="button" value="Calculate Route" onclick="ClickRoute()"/> Then. and add code to the RouteCallback function to set the map view and draw the route. In this example. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. add input controls and construct the Bing Maps REST Services Route request. a route is calculated between a specified start and end point.0 Transitional//EN" "http://www.virtualearth. height:400px.1=" + document.org/TR/xhtml1/DTD/xhtml1-transitional. Display the Results Finally. charset=utf-8"> 25 .

CallRestService(routeRequest).1=" + document.ashx?v=7. mapTypeId:"r"}).0"></script> <script type="text/javascript"> var map = null.<script type="text/javascript" src="http://ecn.getElementById("mapDiv").net/REST/v1/Routes?wp.getElementById('txtStart').Map(document.getElementById('txtEnd').0=" + document. } function ClickRoute(credentials) { map.net/mapcontrol/mapcontrol.value + "&routePathOutput=Points&output=json&jsonp=RouteCallback&key=" + credentials. function GetMap() { // Initialize the map map = new Microsoft.{credentials:"Your Bing Maps Key". } function MakeRouteRequest(credentials) { var routeRequest = "http://dev. } 26 .virtualearth.value + "&wp.getCredentials(MakeRouteRequest).virtualearth.Maps.dev.

resources && result. // Draw the route var routeline = result. var routepoints = new Array(). routeline.Polyline(routepoints.Location(routeline.Maps.coordinates[i][1]).entities.line. bbox[3])).fromLocations(new Microsoft.0. i < routeline.LocationRect. map.resources[0].Color(200.resourceSets[0]. } // Draw the route on the map var routeshape = new Microsoft.setView({ bounds: viewBoundaries}).0.Maps.coordinates. 27 .Maps.resources.coordinates[i][0].push(routeshape).resourceSets.length > 0) { // Set the map view var bbox = result.Maps. var viewBoundaries = Microsoft. {strokeColor:new Microsoft.Maps.resourceSets && result. i++) { routepoints[i]=new Microsoft.resources[0]. map.Maps.function RouteCallback(result) { if (result && result.resourceSets[0].length. for (var i = 0.200)}). new Microsoft.routePath. bbox[1]).Location(bbox[0].Location(bbox[2].bbox.resourceSets[0].resourceSets[0].length > 0 && result.

so after you construct your layer. width:400px. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. you can add it to the map using the push method of the map entities collection.body. request). document.} } function CallRestService(request) { var script = document. The code below adds a custom tile layer to the map."> <div id='mapDiv' style="position:relative.setAttribute("type".appendChild(script).setAttribute("src". "text/javascript"). script. height:400px. Adding a Tile Layer A tile layer is a valid map entity.dtd"> <html> <head> 28 .w3.createElement("script")."></div> <input id="txtStart" type="text" value="Seattle"/> <input id="txtEnd" type="text" value="Portland"/> <input type="button" value="Calculate Route" onclick="ClickRoute()"/> </body> </html> Working with Tile Layers This topic describes how to add a custom tile layer to the map. } </script> </head> <body onload="GetMap(). script.0 Transitional//EN" "http://www.org/TR/xhtml1/DTD/xhtml1-transitional.

Maps.com/maps/isdk/ajax/layers/lidar/{quadkey}. // Construct the layer using the tile source var tilelayer= new Microsoft.entities.TileLayer({ mercator: tileSource.message). mapTypeId:"r"}). center:new Microsoft.dev. } } 29 .png'}). // Push the tile layer to the map map.Location(48.TileSource({uriConstructor: 'http://www.03.ashx?v=7.0"></script> <script type="text/javascript"> function GetMap() { // Initialize the map var map = new Microsoft.4). charset=utf-8"> <script type="text/javascript" src="http://ecn.Maps.microsoft.{credentials:"Your Bing Maps Key".push(tilelayer). opacity: .<title></title> <meta http-equiv="Content-Type" content="text/html. try { // Create the tile layer source var tileSource = new Microsoft.-122.getElementById("mapDiv").7 }).Maps.Maps.Map(document.virtualearth. zoom:12. } catch(err) { alert( 'Error Message:' + err.net/mapcontrol/mapcontrol.

India English . as in the following example.Canada English .0&mkt=frfr"></script> Supported Cultures The following table lists supported cultures for the map control.Country/Region Culture English .France German .Canada French .net/mapcontrol/mapcontrol. Language .ashx?v=7."> <div id='mapDiv' style="position:relative.virtualearth.dev.</script> </head> <body onload="GetMap().Italy en-CA en-IN en-GB en-US fr-CA fr-FR de-DE it-IT 30 . height:400px. However.United Kingdom English . The Culture columns lists the valid values for the mkt parameter. width:400px. which sets the culture to French-France (fr-FR)."></div> </body> </html> Returning a Localized Map The Bing Maps AJAX Control 7. <script type="text/javascript" src="http://ecn. Setting the Culture By default the map labels and the navigation control text are provided in the culture EnglishUnited States (en-US).United States French . the map control culture can be changed by adding the mkt parameter to the map control reference.0 provides the ability to return a localized map.Germany Italian .

0 Control API Reference This section contains reference documentation for the Bing Maps AJAX Control 7.0 contains the following classes and enumerations. Data Structures     AltitudeReference Enumeration Location Class LocationRect Class Point Class Mapping        Events Object LabelOverlay Enumeration Map Class MapOptions Object MapTypeId Enumeration PixelReference Enumeration ViewOptions Object Entities         Color Class EntityCollection Class EntityCollectionOptions Object Polyline Class PolylineOptions Object Polygon Class PolygonOptions Object Pushpin Class 31 .Japan Spanish .0.Country/Region Culture Japanese .Spain ja-JP es-ES Bing Maps AJAX 7. In This Section The Bing Maps AJAX Control 7.Language .

Constants Name Description ground ellipsoid The altitude is measured from the ground level.     PushpinOptions Object TileLayer Class TileLayerOptions Object TileSource Class TileSourceOptions Object AltitudeReference Enumeration Defines the reference point from which the altitude is measured. Color Class Represents a color. Description Color Initializes a new instance of 32 . Constructor Name Definition Color(a:number. Methods Name Definition isValid(reference:AltitudeReference) Return Value Description isValid boolean Determines if the specified reference is a supported AltitudeReference. The altitude is measured from the WGS 84 ellipsoid of the Earth. r:number.

The range of valid values is 0 to 255. The blue value of the color. b:number) Description the Color class. b number Static Methods Name Definition clone(color:Color) Return Value Description clone fromHex Color Color Creates a copy of the Color object. Properties Name Type Description a r g number number number The opacity of the color. The range of valid values is 0 to 255. Returns the opacity of 33 getOpacity() . fromHex(hex:string) Methods Name Definition clone() Return Value Description clone getOpacity Color number Returns a copy of the Color object. The range of valid values is 0 to 255. The red value of the color. The green value of the color. Converts the specified hex string to a Color. The range of valid values for all parameters is 0 to 255. The a parameter represents opacity. The range of valid values is 0 to 255.Name Definition g:number.

0.Name Definition Return Value Description the Color as a value between 0 (a=0) and 1 (a=255). An Entity can be any one of the following types: Polygon. Returns the entity 34 get get(index:number) Entity* . toString toString() string EntityCollection Class Contains a collection of entities. Polyline. Methods Name Definition Return Value Description clear clear() None Removes all entities from the collection. TileLayer. Opacity is ignored.0. For example. Converts the Color object to a string.0) is returned as hex string #000000. Constructor Name Definition EntityCollection(options?:EntityCollectionOptions) Description EntityCollection Initializes a new instance of the EntityCollection class. or EntityCollection. Pushpin. a Color with values (255. toHex toHex() string Converts the Color into a 6-digit hex string.

Inserts the specified entity into the collection at the given index.Name Definition Return Value Description at the specified index in the collection. index:number) None pop pop() Entity* push push(entity:Entity*) None remove remove(entity:Entity*) Entity* . getLength getLength() number Returns the number of entities in the collection. Returns whether the entity collection is visible on the map. Gets the z-index of the entity collection with respect to other items on the map. Adds the specified entity to the last position in the collection. Removes the last entity from the collection and returns it. Removes the specified entity from the collection 35 getVisible getVisible() boolean getZIndex getZIndex() number indexOf indexOf(entity:Entity*) number insert insert(entity:Entity*. -1 is returned. If the entity is not found in the collection. Returns the index of the specified entity in the collection.

entity:Entity*} Occurs when one of the following happens:   An entity is added to the collection. removeAt removeAt(index:number) Entity* Removes the entity at the specified index from the collection and returns it. 36 . Pushpin. For example.Name Definition Return Value Description and returns it. entityChanged object: {collection: EntityCollection. Polyline. then when an entity is added to collection #2. entity:Entity*} Occurs when one of the following happens:  The collection changes. Events Name Arguments Description entityAdded object: {collection: EntityCollection. One of the entities of the collection (such as another entity collection) fires the entityAdded event. Sets the options for the entity collection. setOptions setOptions(options:EntityCollectionOptions) None toString toString() string * An Entity can be any one of the following types: Polygon. Converts the EntityCollection object to a string. TileLayer. if collection #1 contains an entity. which is another collection #2. two entityAdded events are fired. and EntityCollection.

Properties 37 . if collection #1 contains an entity. For example. if collection #1 contains an entity. then when an entity of collection #2 changes. which is another collection #2. One of the entities of the collection (such as another entity collection) fires the entityRemoved event. Pushpin. two entityChanged events are fired. Polyline. For example. * An Entity can be any one of the following types: Polygon. entity:Entity*} Occurs when one of the following happens:   An entity of the collection is removed.Name Arguments Description   An entity of the collection changes. One of the entities of the collection (such as another entity collection) fires the entityChanged event. and EntityCollection. EntityCollectionOptions Object Contains options for an entity collection. TileLayer. entityRemoved object: {collection: EntityCollection. which is another collection #2. then when an entity of collection #2 is removed. two entityRemoved events are fired.

Use the return object to remove the handler using the removeHandler method. //Handle the addThrottledHan dler addThrottledHandler(target:o object bject. The Events object does not need to be initialized. 'viewchangedend’. function(e){ event }).addHandle r(map. The last occurrence of the event is called after the specified throttleInterval. handler:function) object Attaches the handler for the event that is thrown by the target. handler:function. Methods Name Definition Return Value Description addHandler addHandler(target:object. where the minimum interval between events (in milliseconds) is specified in the throttleInterval parameter. eventName:string.Name Type Description visible boolean A Boolean indicating whether the entity collection is visible on the map. The z-index of the entity collection with respect to other items on the map.Events. zIndex number Events Object Provides event handling functionality for map and entity events. eventName:string. hasHandler hasHandler(target:object. Call the Events methods directly. throttleInterval:number) Attaches the handler for the event that is thrown by the target.Maps. Microsoft. boolea Checks if the target has any 38 .

Detaches the specified handler from the event. eventName:string. Methods Name Definition isValid(labelOverlay:LabelOverlay) Return Value Description isValid boolean Determines whether the specified labelOverlay is a supported LabelOverlay. 39 . The handlerId is returned by the addHandler and addThrottledHandler methods. Constants Name Description hidden visible Map labels are not shown on top of imagery. Invokes an event on the target.Name Definition eventName:string) Return Value Description n None attached event handler. Location Class (AJAX) Contains the altitude and coordinate values of a location on the map. args:object) removeHandler removeHandler(handlerId: None object) LabelOverlay Enumeration Defines how map labels are displayed. invoke invoke(target:object. This causes all handlers for the specified eventName to be called. Map labels are shown on top of imagery.

The reference from which the altitude is measured. The latitude of the location.Constructor Name Definition Location(latitude:number. location2:Location) boolean Determines if the specified Location objects are equal. Normalizes the specified longitude so that it is between -180 and 180. altitude?:number. longitude:number. Static Methods Name Definition Return Value Description areEqual areEqual(location1:Location. Properties Name Type Description altitude altitudeMode latitude longitude number AltitudeReference number number The altitude of the location. The altitude and altitudeMode parameters default to undefined. normalizeLongitude normalizeLongitude(longitude:number) number 40 . altitudeMode?:AltitudeReference) Description Location Initializes a new instance of the Location class. The longitude of the location.

Constructor Name Definition LocationRect(center:Location. in degrees.Methods Name Definition clone() Return Value Description clone toString Location string Returns a copy of the Location object. The height. Static Methods 41 . toString() LocationRect Class Represents a rectangle on the map. The width. height:number) Description LocationRect Initializes a new instance of the LocationRect class. width:number. Properties Name Type Description center height width Location number number The location that defines the center of the rectangle. in degrees. Converts the Location object to a string. of the rectangle. of the rectangle.

west.Name Definition Return Value Description fromCorn ers fromCorners(northwest:Loc ation.east". Returns whether the specified Location is within 42 contains contains(location:Location) boolean . fromEdge fromEdges(north:number. Methods Name Definition clone() Return Value Description clone LocationRect Returns a copy of the LocationRect object.LocationRect. location3].Maps.south. east:number. south:number.fromLocatio ns(location1. North. altitude:number. location2. Microsoft.fromLocatio ns(locations).Maps. To provide an array of locations: var locations = [location1. To provide a list of locations: Microsoft. Returns a LocationRect using the specified northern and southern latitudes and western and eastern longitudes for the rectangle boundaries. location2. altitudeReference:Altitude Reference) fromLoca tion fromLocation(list of locations/array) Location Rect Returns a LocationRect using a list of locations or an array of locations. southeast:Location) Location Rect Location Rect Returns a LocationRect using the specified locations for the northwest and southeast corners. fromStrin g fromString(string:string) Location Rect Creates a LocationRect from a string with the following format: "north.LocationRect. location3). s west:number. west. south and east specify the coordinate number values.

Returns the latitude that defines the southern edge of the LocationRect. Returns whether the specified LocationRect intersects with this LocationRect. Returns the Location that defines the southeast corner of the LocationRect. Returns the latitude that defines the western edge of the LocationRect. getEast getEast() number Returns the longitude that defines the eastern edge of the LocationRect. Returns the latitude that defines the northern edge of the LocationRect. 43 getNorth getNorth() number getNorthwest getNorthwest() Location getSouth getSouth() number getSoutheast getSoutheast() Location getWest getWest() number intersects intersects(rect:LocationRect) boolean .Name Definition Return Value Description the LocationRect. Returns the Location that defines the northwest corner of the LocationRect.

options?:MapOptions) Description Map Initializes a new instance of the Map class.Name Definition toString() Return Value Description toString string Converts the LocationRect object to a string. Map Class Represents a map. Constructor Name Definition Map(containerElement:node. Returns the location rectangle that defines the boundaries of 44 focus focus() None getBounds getBounds() LocationRect . Properties Name Type Description entities EntityCollection The map‟s entities. Applies focus to the map control so that it responds to keyboard events. Use this property to add or remove entities from the map. Methods Name Definition blur() Return Value Description blur None Removes focus from the map control so that it does not respond to keyboard events.

45 getHeight() getImageryId() getMapTypeId getMapTypeId() string getMetersPerPix el getMetersPerPixel() number .Name Definition Return Value Description the current map view.getCredentials(function( credentials) { if(credentials !== null) { service }). Returns the height of the map control. Valid map types are listed in the MapTypeId Enumeration topic. map. getCenter getCenter() Location Returns the location of the center of the current map view. Returns a string that represents the current map type displayed on the map. This method calls the callback function with the session ID as the first parameter. Gets the session ID. Returns the current scale in meters per pixel of the center of the map. Gets the array of strings representing the attributions of the imagery currently displayed on the map. /* Valid session */ } Id. Returns the string that represents the imagery currently displayed on the map. Use it to call REST getCopyrights getCopyrights() string[] getCredentials getCredentials(callback:f None unction) getHeading getHeight getImageryId getHeading() number number string Returns the heading of the current map view.

relative to the page. Returns the x coordinate of the viewport origin (the center of the map). Returns the map option settings. Returns the center location of the view to which the map is navigating. Returns the heading of the view to which the map is navigating. Returns the scale in meters per pixel of the center of the view to which the map is navigating. Returns the zoom level of the view to which the map is navigating. Returns the y coordinate of the top left corner of the map control. relative to the page. Returns the map‟s user node. Returns the width of the map 46 getPageX() getPageY getPageY() number getRootElement getRootElement() Node LocationRect getTargetBounds getTargetBounds() getTargetCenter getTargetCenter() Location getTargetHeadin g getTargetMeters PerPixel getTargetHeading() number getTargetMetersPerPixel() number getTargetZoom getTargetZoom() number getUserLayer getViewportX getUserLayer() getViewportX() Node number getViewportY getViewportY() number getWidth getWidth() number . Returns the location rectangle that defines the boundaries of the view to which the map is navigating. Returns the y coordinate of the viewport origin (the center of the map). relative to the page. Returns the x coordinate of the top left corner of the map control. Returns the map‟s root node.Name Definition getModeLayer() getOptions() Return Value Description getModeLayer getOptions getPageX Node MapOptions number Returns the map‟s mode node. relative to the page.

converts an 47 isMercator isMercator() isRotationEnable d isRotationEnabled() boolean setMapType setMapType(mapTypeId:strin None g) setOptions setSize setOptions({height:numbe None None r. the map fills the entire area. Alternatively. Returns true if the current map type allows the heading to change. reference?:PixelReference ) . If the map is not able to convert the Location. Valid map type IDs are listed in the MapTypeId Enumeration topic. width: number}) setSize(width?:number. PixelReference. Sets the current map type. If reference is not specified. The specified mapTypeId must be a valid map type ID or a registered map type ID. Sets the size of the map. or Point[] ns) tryLocationToPixel(locati on:Location |Location[].Name Definition Return Value Description control. Sets the map view based on the specified options. Sets the height and width of the map. false if the display heading is fixed. getZoom getZoomRange getZoom() number Returns the zoom level of the current map view. getZoomRange() object:{min:nu Returns the range of valid mber. null is returned. Converts a specified Location to a Point on the map relative to the specified PixelReference. height?:number) setView tryLocationToPix el setView(options:ViewOptio None null.viewport is used. max: zoom levels for the current number} map view. Point. boolean Returns whether the map is in a regular Mercator nadir mode. If width and height are not specified.

converts an array of Points and returns an array of Locations if all points were converted. Occurs when the map imagery changes.Name Definition Return Value Description array of Locations and returns an array of Points if all locations were converted. If any of the conversions fail. PixelReference. or Location[] Converts a specified Point to a Location on the map relative to the specified PixelReference. Events Name Arguments Description click copyrightChanged eventArgs:MouseEventArgs None Occurs when the mouse is used to click the map. Occurs when the mouse is used to double click the map. If any of the conversions fail. null is returned. Occurs when the left mouse button is pressed when the mouse is over 48 dblclick eventArgs:MouseEventArgs imageryChanged mousedown None eventArgs:MouseEventArgs . null is returned. reference?:PixelReference ) null. Occurs when the copyright of the map changes. Alternatively. null is returned. If the map is not able to convert the Point. Location. tryPixelToLocati on tryPixelToLocation(point: Point |Point[].viewport is used. If reference is not specified.

Name

Arguments

Description

the map. mousemove mouseout eventArgs:MouseEventArgs eventArgs:MouseEventArgs Occurs when the mouse moves over the map. Occurs when the mouse cursor moves out of the area covered by the map. Occurs when the mouse is over the map. Occurs when the left mouse button is lifted up when the mouse is over the map. Occurs when the right mouse button is used to click the map. Occurs when the view towards which the map is navigating changes. Occurs for every frame of a map view change. Occurs when the map view is done changing. Occurs when the map view starts changing.

mouseover mouseup

eventArgs:MouseEventArgs eventArgs:MouseEventArgs

rightclick

eventArgs:MouseEventArgs

targetviewchanged

None

viewchange viewchangeend viewchangestart

None None None

MapOptions Object
Represents options to customize the map that is displayed.

Properties
Name Type Description

credentials

string

The Bing Maps Key used to authenticate the application. 49

Name

Type

Description

This property is required and can only be set when using the Map constructor. disableUserInput boolean A boolean value indicating whether to disable the map‟s response to user input. The default value is false. This property can only be set when using the Map constructor. A boolean value indicating TM whether the Bing logo on the map is clickable. The default value is true. This property can only be set when using the Map constructor. A boolean value indicating TM whether to enable the Bing hovering search logo on the map. The default value is true. This property can only be set when using the Map constructor. The height of the map. The default value is null. If no height is specified, the height of the div is used. A boolean value indicating whether or not to show the map copyright. The default value is true. This property can only be set when using the Map constructor. A boolean value indicating whether to show the map navigation control. The default value is true. This property can only be set when using the Map constructor. 50

enableClickableLogo

boolean

enableSearchLogo

boolean

height

number

showCopyright

boolean

showDashboard

boolean

Name

Type

Description

showLogo

boolean

A boolean value indicating whether to show the map logo. The default value is true. This property can only be set when using the Map constructor. A boolean value indicating whether to show the scale bar. The default value is true. This property can only be set when using the Map constructor. The width of the map. The default value is null. If no width is specified, the width of the div is used.

showScalebar

boolean

width

number

MapTypeId Enumeration
Contains identifiers for the imagery displayed on the map.

Constants
Name Description

aerial auto birdseye collinsBart mercator ordnanceSurvey road

The aerial map style is being used. The map is set to choose the best imagery for the current view. The bird‟s eye map type is being used. Collin‟s Bart (mkt=en-gb) map type is being used. The Mercator style is being used. Ordinance Survey (mkt=en-gb) map type is being used. The road map style is being used. 51

Maps. mapTypeId:Microsoft.virtualearth. the mkt parameter of the control is set to this culture. width:600px.Map(document. center: new Microsoft.collinsBart}).1).Location(51. height:600px. Since this imagery is only supported for the en-gb culture.getElementById("mapDiv").0 Transitional//EN" "http://www. -. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.org/TR/xhtml1/DTD/xhtml1-transitional.Maps.MapTypeId. zoom: 10.Example This code sample sets the map imagery to Collin‟s Bart (collinsBart).0&mkt=engb"></script> <script type="text/javascript"> function GetMap() { var map = new Microsoft.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html. {credentials:"Bing Maps Key"."> <div id='mapDiv' style="position:relative.dev.Maps.ashx?v=7.w3.5."></div> </body> </html> See Also Changing the Map View Returning a Localized Map 52 . } </script> </head> <body onload="GetMap(). charset=utf-8"> <script type="text/javascript" src="http://ecn.net/mapcontrol/mapcontrol.

„polyline‟. The object that fired the event. The y-value of the pixel coordinate on the page of the mouse cursor. relative to the map. or „pushpin‟ pageY number target targetType object string Methods Name Definition getX() Return Value Description getX number Returns the x-value of the pixel coordinate. of the mouse. Properties Name Type Description eventName pageX string number The event that occurred.MouseEventArgs Object Contains the arguments for mouse events. The type of the object that fired the event. Returns the y-value of the pixel coordinate. relative to the map. getY getY() number 53 . „polygon‟. of the mouse. The x-value of the pixel coordinate on the page of the mouse cursor. Valid values include the following: „map‟.

This option is best used when working with mouse or touch events. where the top left corner of the map control is (0. 0). relative to the center of the map. The pixel is defined in viewport coordinates. The pixel is defined relative to the page. where the top left corner of the HTML page is (0. where the center of the map is (0. 0). 54 .PixelReference Enumeration Contains constants used to show how pixels are defined. Using this option might cause a page reflow which may negatively impact performance. 0). Point Class Represents a point on the map. Constants Name Description control The pixel is defined relative to the map control‟s root element. This option is best used for positioning geo-aligned entities added to the user layer. Using this option might cause a page reflow which may negatively impact performance. page viewport Methods Name Definition isValid(reference:PixelReference) Return Value Description isValid boolean Determines whether the specified reference is a supported PixelReference.

Constructor Name Definition Point(x:number. point2:Point) Return Value Description areEqual boolean Determines if the specified points are equal. The y-value of the coordinate. Static Methods Name Definition areEqual(point1:Point. clone clone(Point) Point Methods Name Definition clone() Return Value Description clone toString Point string Returns a copy of the Point object. toString() 55 . Converts the Point object into a string. Returns a copy of the Point object. Properties Name Type Description x y number number The x value of the coordinate. y:number) Description Point Initializes a new instance of the Point class.

Returns the thickness of the outline of the polygon. options?:PolygonOptions) Description Polygon Initializes a new instance of the Polygon class. A value of false indicates that the polygon is 56 getLocations getLocations() Location[] getStrokeColor getStrokeColor() Color getStrokeThickness getStrokeThickness() number getVisible getVisible() boolean . Returns the locations that define the corners of the polygon. Constructor Name Definition Polygon(locations:Location[].Polygon Class (AJAX) Represents a polygon on the map. Returns the color of the outline of the polygon. Returns whether the polygon is visible. Methods Name Definition getFillColor() Return Value Description getFillColor Color Returns the color of the inside of the polygon.

Sets options for the polygon. Occurs when the mouse is used to double click the polygon. 57 entityChanged object: {entity:Entity} mousedown eventArgs:MouseEventArgs mouseout eventArgs:MouseEventArgs . although it is still an entity on the map. setLocations setLocations(locations:Location[]) None Sets the locations that define the corners of the polygon. Occurs when the location of the polygon or any of the polygon‟s options change. Converts the Polygon object to a string.Name Definition Return Value Description hidden. setOptions setOptions(options:PolygonOptions) None toString toString() string Events Name Arguments Description click dblclick eventArgs:MouseEventArgs eventArgs:MouseEventArgs Occurs when the mouse is used to click the polygon. Occurs when the left mouse button is pressed when the mouse is over the polygon. Occurs when the mouse cursor moves out of the area covered by the polygon.

A boolean indicating whether to show or hide the polygon. Polyline Class Represents a polyline on the map. Properties Name Type Description fillColor strokeColor strokeThickness visible Color Color number boolean The color of the inside of the polygon. The color of the outline of the polygon. Occurs when the right mouse button is used to click the polygon. although it is still an entity on the map. The thickness of the outline of the polygon.Name Arguments Description mouseover mouseup eventArgs:MouseEventArgs eventArgs:MouseEventArgs Occurs when the mouse is over the polygon. 58 . Occurs when the left mouse button is lifted up when the mouse is over the polygon. A value of false indicates that the polygon is hidden. rightclick eventArgs:MouseEventArgs PolygonOptions Object Represents the options for a polygon.

Returns the thickness of the polyline. Returns the color of the polyline. 59 getStrokeColor getStrokeColor() Color getStrokeThickness getStrokeThickness() number getVisible getVisible() boolean setLocations setLocations(locations:Location[]) None setOptions setOptions(options:PolylineOptions) None .Constructor Name Definition Polyline(locations:Location[]. Sets options for the polyline. A value of false indicates that the polyline is hidden. Sets the locations that define the polyline. options?:PolylineOptions) Description Polyline Initializes a new instance of the Polyline class. Returns whether the polyline is visible. although it is still an entity on the map. Methods Name Definition getLocations() Return Value Description getLocations Location[] Returns the locations that define the polyline.

Occurs when the mouse cursor moves out of the area covered by the polyline. Occurs when the location of the polyline or any of the polyline‟s options change. Events Name Arguments Description click dblclick eventArgs:MouseEventArgs eventArgs:MouseEventArgs Occurs when the mouse is used to click the polyline. Occurs when the left mouse button is lifted up when the mouse is over the polyline. Occurs when the mouse is used to double click the polyline. Occurs when the mouse is over the polyline.Name Definition toString() Return Value Description toString string Converts the Polyline object to a string. entityChanged object: {entity:Entity} mousedown eventArgs:MouseEventArgs mouseout eventArgs:MouseEventArgs mouseover mouseup eventArgs:MouseEventArgs eventArgs:MouseEventArgs rightclick eventArgs:MouseEventArgs 60 . Occurs when the right mouse button is used to click the polyline. Occurs when the left mouse button is pressed when the mouse is over the polyline.

Pushpin Class (AJAX) Defines a pushpin on the map.PolylineOptions Object Represents the options for a polyline. Properties Name Type Description strokeColor strokeThickness visible Color number boolean The color of the polyline. Constructor Name Definition Pushpin(location:Location. The thickness of the polyline. A boolean indicating whether to show or hide the polyline. Methods Name Definition getAnchor() Return Value Description getAnchor Point Returns the point on the pushpin icon which is anchored to the 61 . A value of false indicates that the polyline is hidden. options?:PushpinOptions) Description Pushpin Initializes a new instance of the Pushpin class. although it is still an entity on the map.

0) is the top left corner of the icon. A value of false indicates that the pushpin is hidden. although it is still an entity on the map. 62 getHeight() getLocation getLocation() Location getText getText() string getTextOffset getTextOffset() Point getTypeName getVisible getTypeName() string boolean getVisible() getWidth getWidth() number . Returns the location of the pushpin. Returns the width of the pushpin. getIcon getHeight getIcon() string number Returns the pushpin icon. Returns the type of the pushpin. which is the width of the pushpin icon.Name Definition Return Value Description pushpin location. which is the height of the pushpin icon. Returns the text associated with the pushpin. Returns whether the pushpin is visible. An anchor of (0. Returns the height of the pushpin. Returns the amount the text is shifted from the pushpin icon.

Converts the Pushpin object to a string. Occurs when the mouse cursor moves out of the area covered by the pushpin. Occurs when the mouse is used to double click the pushpin. Occurs when the location of the pushpin or any of the pushpin‟s options change.Name Definition getZIndex() Return Value Description getZIndex number Returns the zindex of the pushpin with respect to other items on the map. Sets the location of the pushpin. Occurs when the mouse is 63 entityChanged object: {entity:Entity} mousedown eventArgs:MouseEventArgs mouseout eventArgs:MouseEventArgs mouseover eventArgs:MouseEventArgs . Sets options for the pushpin. Occurs when the left mouse button is pressed when the mouse is over the pushpin. setLocation setOptions toString setLocation(location:Location) None None string setOptions(options:PushpinOptions) toString() Events Name Arguments Description click dblclick eventArgs:MouseEventArgs eventArgs:MouseEventArgs Occurs when the mouse is used to click the pushpin.

5). as a string. The type of the pushpin. The text associated with the pushpin. An anchor of (0. The default anchor is the bottom center of the icon. which is the height of the pushpin icon. The amount the text is shifted from the pushpin icon. The default value is (0. rightclick eventArgs:MouseEventArgs PushpinOptions Object Represents the options for a pushpin.Name Arguments Description over the pushpin. The height of the pushpin.0) is the top left corner of the icon. mouseup eventArgs:MouseEventArgs Occurs when the left mouse button is lifted up when the mouse is over the pushpin. The default value is 39. The pushpin DOM (document object model) node 64 icon height string number text textOffset string Point typeName string . Occurs when the right mouse button is used to click the pushpin. The pushpin icon. Properties Name Type Description anchor Point The point on the pushpin icon which is anchored to the pushpin location.

Constructor Name Definition TileLayer(options:TileLayerOptions) Description TileLayer Initializes a new instance of the TileLayer class. Methods Name Definition getOpacty() Return Type Description getOpacity number Returns the opacity of the tile layer. The default value is 25. The width of the pushpin. A value of false indicates that the pushpin is hidden.Name Type Description created for the pushpin will have the specified typeName. The default value is true. The z-index of the pushpin with respect to other items on the map. although it is still an entity on the map. visible boolean A boolean indicating whether to show or hide the pushpin. Returns the tile source of the 65 getTileSource getTileSource(projection:string) TileSource . width number zIndex number TileLayer Class Represents a tile layer. defined as a double between 0 (not visible) and 1. which is the width of the pushpin icon.

Converts the TileLayer object to a string. enhancedBirdseyeNorthUp. The projection parameter accepts the following values: mercator. zIndex number mercator TileSource 66 . The tile source for the tile layer. defined by a number between 0 (not visible) and 1. enhancedBirdseyeWestUp getZIndex getZIndex() number Returns the z-index of the tile layer with respect to other items on the map. with respect to other items on the map. enhancedBirdseyeEastUp. The z-index of the tile layer. toString toString() string See Also Working with Tile Layers TileLayerOptions Object Defines the options for a tile layer.Name Definition Return Type Description tile layer. Properties Name Type Description opacity number The opacity of the tile layer. enhancedBirdseyeSouthUp.

See Also Working with Tile Layers TileSource Class Defines a tile source for a tile layer. Constructor Name Definition TileSource(options:TileSourceOptions) Description TileSource Initializes a new instance of the TileSource class. Returns a string that constructs tile URLs used to retrieve tiles for the tile layer. Returns the pixel width of each tile in the tile source. Converts the TileSource object to a string. getUriConstructor getUriConstructor() string getWidth getWidth() number toString toString() string See Also Working with Tile Layers 67 . Methods Name Definition getHeight() Return Type Description getHeight Number Returns the pixel height of each tile in the tile source.

since Mercator tile source tiles are 256x256.TileSourceOptions Object Defines options for a tile source. 128x128. For example. since Mercator tile source tiles are 256x256. 256x256. or any combination of these. 68 . this projection supports tiles that are 64x64. For example. Properties Name Type Description height number The pixel height of each tile in the tile source. or any combination of these. This property is required. width number The pixel width of each tile in the tile source. The specified height needs to be a multiplier of 2 of the current projection‟s tile height for the tiles to be shown. 128x128. 512x512. The default value is 256. 512x512. The uriConstructor will replace {subdomain} and {quadkey}. 256x256. The specified width needs to be a multiplier of 2 of the current projection‟s tile width for the tiles to be shown. The default value is 256. uriConstructor string The string that constructs the URLs used to retrieve tiles from the tile source. this projection supports tiles that are 64x64.

The location of the center of the map view. The bounding rectangle of the map view. 180 = South. A constant indicating how map labels are displayed. Properties Name Type Description animate boolean A boolean that specifies whether to animate map navigation. Valid map types are found in the MapTypeId Enumeration topic. and 270 = West. The directional heading of the map. The heading is represented in geometric degrees with 0 or 360 = North. The zoom level of the map view. 90 = East. 69 bounds center centerOffset heading LocationRect Location Point number labelOverlay mapTypeId LabelOverlay string padding number zoom number . The map type of the view. The amount the center is shifted. The amount of padding to be added to each side of the bounds of the map view.See Also Working with Tile Layers ViewOptions Object Contains options for the map view.

0 Internet Explorer 8.0 is supported on the following Web browsers.0 Developer Resources This topic contains support resources and contact information.0 iPhone Browser Bing Maps AJAX Control 7. Desktop Browser Description Internet Explorer 7.Bing Maps AJAX Control 7.0. Developer Resources The following resources are available for Bing Maps developers:    Connect with other Bing Maps developers on the Bing Maps AJAX Control Forum.0 Firefox 3. Read the Bing Maps Developer blog 70 .0 Internet Explorer 9. If you are not using a supported Web browser. certain features of the map control may not work. Visit the http://www.microsoft.0 Supported Browsers This topic contains information about browser support for the Bing Maps AJAX Control 7. Supported Browsers The Bing Maps AJAX Control 7.com/maps website.6 Safari 5 Google Chrome Supported on the PC Supported on the PC Supported on the PC Supported on the PC and the Mac Supported on the Mac Supported on the PC Mobile Browser 3GS/4.

com or go to http://www. 71 . email maplic@microsoft. Central. From North. 11315.com.microsoft. getting a Bing Maps Key. Licensing Questions If you are interested in finding out more about Bing Maps or have questions about licensing Bing Maps.com/maps/contact. or have an account access question. and South America. contact mpnet@microsoft. you can also contact Bing Maps by calling (800) 426-9400.aspx.Account Issues If you are having issues creating a Bing Maps Developer Account. ext.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->