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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0 Control API Reference This section contains reference documentation for the Bing Maps AJAX Control 7.Country/Region Culture Japanese . 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 .Language . In This Section The Bing Maps AJAX Control 7.0.0 contains the following classes and enumerations.Japan Spanish .Spain ja-JP es-ES Bing Maps AJAX 7.

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

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

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

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

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

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

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

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

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

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

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

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

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

Name Definition Return Value Description the current map view. Valid map types are listed in the MapTypeId Enumeration topic.getCredentials(function( credentials) { if(credentials !== null) { service }). 45 getHeight() getImageryId() getMapTypeId getMapTypeId() string getMetersPerPix el getMetersPerPixel() number . /* Valid session */ } Id. This method calls the callback function with the session ID as the first parameter. map. getCenter getCenter() Location Returns the location of the center of the current map view. Returns the current scale in meters per pixel of the center of the map. Returns the height of the map control. Gets the array of strings representing the attributions of the imagery currently displayed on the map. 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. Returns a string that represents the current map type displayed on the map. Gets the session ID.

relative to the page. Returns the x coordinate of the top left corner of the map control. 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 y coordinate of the viewport origin (the center of the map). Returns the center location of the view to which the map is navigating. Returns the x coordinate of the viewport origin (the center of the map). 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.Name Definition getModeLayer() getOptions() Return Value Description getModeLayer getOptions getPageX Node MapOptions number Returns the map‟s mode node. relative to the page. Returns the map‟s root node. relative to the page. Returns the location rectangle that defines the boundaries of the view to which the map is navigating. relative to the page. 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 map option settings. Returns the map‟s user node.

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

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

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

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

Valid values include the following: „map‟. Properties Name Type Description eventName pageX string number The event that occurred. relative to the map.MouseEventArgs Object Contains the arguments for mouse events. getY getY() number 53 . The x-value of the pixel coordinate on the page of the mouse cursor. The object that fired the event. relative to the map. The type of the object that fired the event. 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. The y-value of the pixel coordinate on the page of the mouse cursor. „polyline‟. Returns the y-value of the pixel coordinate. of the mouse. of the mouse. „polygon‟.

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

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

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

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

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

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

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

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

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

Occurs when the mouse is 63 entityChanged object: {entity:Entity} mousedown eventArgs:MouseEventArgs mouseout eventArgs:MouseEventArgs mouseover eventArgs:MouseEventArgs .Name Definition getZIndex() Return Value Description getZIndex number Returns the zindex of the pushpin with respect to other items on the map. 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. Converts the Pushpin object to a string. Sets the location of the pushpin. Occurs when the mouse is used to double click the pushpin. Sets options for the pushpin. Occurs when the mouse cursor moves out of the area covered by the pushpin. Occurs when the location of the pushpin or any of the pushpin‟s options change. Occurs when the left mouse button is pressed when the mouse is over the pushpin.

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

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

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

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

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

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

0 Supported Browsers This topic contains information about browser support for the Bing Maps AJAX Control 7.0. Visit the http://www.0 iPhone Browser Bing Maps AJAX Control 7.0 Developer Resources This topic contains support resources and contact information.com/maps website.0 Internet Explorer 8. certain features of the map control may not work. Desktop Browser Description Internet Explorer 7.0 Firefox 3.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.0 Internet Explorer 9.0 is supported on the following Web browsers. Developer Resources The following resources are available for Bing Maps developers:    Connect with other Bing Maps developers on the Bing Maps AJAX Control Forum.microsoft.Bing Maps AJAX Control 7. Supported Browsers The Bing Maps AJAX Control 7. If you are not using a supported Web browser. Read the Bing Maps Developer blog 70 .

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