Upload
turisas-suuri
View
387
Download
0
Embed Size (px)
Citation preview
Contents
Bing Maps AJAX Control, Version 7.0 ........................................................................................... 14
In This Section ............................................................................................................................ 14
See Also ..................................................................................................................................... 14
Getting Started with the 7.0 Map Control ...................................................................................... 15
Create a Bing Maps Account and Get a Key ............................................................................. 15
Get Familiar with the Bing Maps AJAX 7.0 Control ................................................................... 15
What's New in the AJAX Map Control ........................................................................................... 15
New Features ............................................................................................................................. 15
Developing with the 7.0 Map Control............................................................................................. 16
In This Section ............................................................................................................................ 16
Loading the AJAX Map Control ..................................................................................................... 16
Displaying the Default Map ........................................................................................................ 16
Customizing the Map When Loading ......................................................................................... 19
Example ..................................................................................................................................... 19
Setting Map Control Parameters ................................................................................................... 20
Parameters ................................................................................................................................. 20
Setting Parameters..................................................................................................................... 21
See Also ..................................................................................................................................... 21
Changing the Map View ................................................................................................................ 21
Setting the Initial Map View ........................................................................................................ 22
Changing the Map View ............................................................................................................. 23
Adding Entities to the Map ............................................................................................................. 25
Adding Single Entities to the Map .............................................................................................. 25
Adding a Pushpin .................................................................................................................... 25
Adding a Shape ...................................................................................................................... 27
Adding Multiple Entities to the Map ............................................................................................ 29
Changing Entities on the Map .................................................................................................... 30
Customizing Your Pushpins .......................................................................................................... 33
Customizing Your Pushpin Icon ................................................................................................. 33
Creating a Pushpin Infobox ........................................................................................................ 34
Displaying Location Search Results Using the REST Services .................................................... 36
Initialize the Map ........................................................................................................................ 36
Add Controls ............................................................................................................................... 37
Make a Geocode REST Request ............................................................................................... 38
Display the Results..................................................................................................................... 39
Getting Route Directions Using the REST Services ...................................................................... 41
Initialize the Map ........................................................................................................................ 41
Construct the Route Request ..................................................................................................... 42
Display the Results..................................................................................................................... 43
Working with Tile Layers ............................................................................................................... 46
Adding a Tile Layer .................................................................................................................... 46
Using Events in the AJAX Control ................................................................................................. 47
Example ..................................................................................................................................... 47
Returning a Localized Map ............................................................................................................ 51
Setting the Culture...................................................................................................................... 51
Supported Cultures .................................................................................................................... 52
Remarks ..................................................................................................................................... 53
Building Your Own Module ............................................................................................................ 53
Develop Your Module ................................................................................................................. 53
Register and Load Your Module ................................................................................................ 54
Use Your Module........................................................................................................................ 54
See Also ..................................................................................................................................... 56
Developing a Metro Style App ....................................................................................................... 56
Requirements ............................................................................................................................. 56
Getting Started ........................................................................................................................... 56
Remarks ..................................................................................................................................... 57
Example ..................................................................................................................................... 58
See Also ..................................................................................................................................... 65
Microsoft.Maps API Reference ...................................................................................................... 65
In This Section ............................................................................................................................ 65
Data Structures ....................................................................................................................... 65
Mapping .................................................................................................................................. 66
Entities .................................................................................................................................... 66
User Location .......................................................................................................................... 66
Dynamic Module Loading ....................................................................................................... 67
AltitudeReference Enumeration ..................................................................................................... 67
Constants ................................................................................................................................... 67
Methods ...................................................................................................................................... 67
Example ..................................................................................................................................... 67
AnimationVisibility Enumeration .................................................................................................... 69
Constants ................................................................................................................................... 69
Color Class .................................................................................................................................... 69
Constructor ................................................................................................................................. 69
Properties ................................................................................................................................... 69
Static Methods ............................................................................................................................ 70
Methods ...................................................................................................................................... 70
Example ..................................................................................................................................... 71
Coordinates Class ......................................................................................................................... 73
Properties ................................................................................................................................... 73
See Also ..................................................................................................................................... 74
EntityCollection Class .................................................................................................................... 74
Constructor ................................................................................................................................. 74
Methods ...................................................................................................................................... 74
Events ........................................................................................................................................ 76
Example ..................................................................................................................................... 77
EntityCollectionOptions Object ...................................................................................................... 79
Properties ................................................................................................................................... 79
Example ..................................................................................................................................... 80
Events Object ................................................................................................................................ 82
Methods ...................................................................................................................................... 82
Example ..................................................................................................................................... 83
GeoLocationProvider Class ........................................................................................................... 85
Constructor ................................................................................................................................. 85
Methods ...................................................................................................................................... 85
Example ..................................................................................................................................... 87
See Also ..................................................................................................................................... 88
Infobox Class ................................................................................................................................. 89
Constructor ................................................................................................................................. 89
Methods ...................................................................................................................................... 89
Events ........................................................................................................................................ 92
Remarks ..................................................................................................................................... 92
Example ..................................................................................................................................... 92
InfoboxOptions Object ................................................................................................................... 94
Properties ................................................................................................................................... 94
Example ..................................................................................................................................... 97
See Also ..................................................................................................................................... 99
InfoboxType Enumeration ............................................................................................................. 99
Constants ................................................................................................................................... 99
Example ..................................................................................................................................... 99
KeyEventArgs Object .................................................................................................................. 101
Properties ................................................................................................................................. 101
Example ................................................................................................................................... 101
LabelOverlay Enumeration .......................................................................................................... 103
Constants ................................................................................................................................. 103
Methods .................................................................................................................................... 103
Example ................................................................................................................................... 103
Location Class (AJAX) ................................................................................................................. 105
Constructor ............................................................................................................................... 105
Properties ................................................................................................................................. 105
Static Methods .......................................................................................................................... 105
Methods .................................................................................................................................... 106
Example ................................................................................................................................... 106
LocationRect Class ...................................................................................................................... 107
Constructor ............................................................................................................................... 108
Properties ................................................................................................................................. 108
Static Methods .......................................................................................................................... 108
Methods .................................................................................................................................... 109
Example ................................................................................................................................... 110
Map Class .................................................................................................................................... 111
Constructor ............................................................................................................................... 111
Properties ................................................................................................................................. 112
Static Methods .......................................................................................................................... 112
Methods .................................................................................................................................... 112
Events ...................................................................................................................................... 116
Example ................................................................................................................................... 118
MapMode Class (AJAX) .............................................................................................................. 119
Mercator Map Mode Methods .................................................................................................. 119
MapOptions Object ...................................................................................................................... 121
Properties ................................................................................................................................. 121
Example ................................................................................................................................... 125
MapTypeId Enumeration ............................................................................................................. 126
Constants ................................................................................................................................. 126
Example ................................................................................................................................... 126
See Also ................................................................................................................................... 127
Module Loading Methods ............................................................................................................ 127
Methods .................................................................................................................................... 127
Example ................................................................................................................................... 129
See Also ................................................................................................................................... 131
MouseEventArgs Object .............................................................................................................. 131
Properties ................................................................................................................................. 131
Methods .................................................................................................................................... 132
Example ................................................................................................................................... 132
PixelReference Enumeration ....................................................................................................... 134
Constants ................................................................................................................................. 134
Methods .................................................................................................................................... 134
Example ................................................................................................................................... 134
Point Class ................................................................................................................................... 136
Constructor ............................................................................................................................... 136
Properties ................................................................................................................................. 136
Static Methods .......................................................................................................................... 137
Methods .................................................................................................................................... 137
Example ................................................................................................................................... 137
Polygon Class (AJAX) ................................................................................................................. 139
Constructor ............................................................................................................................... 139
Methods .................................................................................................................................... 139
Events ...................................................................................................................................... 140
Example ................................................................................................................................... 141
PolygonOptions Object ................................................................................................................ 143
Properties ................................................................................................................................. 143
Example ................................................................................................................................... 143
Polyline Class .............................................................................................................................. 145
Constructor ............................................................................................................................... 145
Methods .................................................................................................................................... 145
Events ...................................................................................................................................... 146
Example ................................................................................................................................... 147
PolylineOptions Object ................................................................................................................ 149
Properties ................................................................................................................................. 149
Example ................................................................................................................................... 149
Position Class .............................................................................................................................. 151
Properties ................................................................................................................................. 151
See Also ................................................................................................................................... 151
PositionCircleOptions Object ....................................................................................................... 151
Properties ................................................................................................................................. 151
Example ................................................................................................................................... 152
PositionError Class ...................................................................................................................... 153
Properties ................................................................................................................................. 154
See Also ................................................................................................................................... 154
PositionOptions Object ................................................................................................................ 154
Properties ................................................................................................................................. 154
Example ................................................................................................................................... 156
Pushpin Class (AJAX) ................................................................................................................. 158
Constructor ............................................................................................................................... 158
Methods .................................................................................................................................... 158
Events ...................................................................................................................................... 159
Example ................................................................................................................................... 161
PushpinOptions Object ................................................................................................................ 162
Properties ................................................................................................................................. 162
Example ................................................................................................................................... 163
TileLayer Class ............................................................................................................................ 165
Constructor ............................................................................................................................... 165
Methods .................................................................................................................................... 165
Events ...................................................................................................................................... 166
Example ................................................................................................................................... 166
See Also ................................................................................................................................... 168
TileLayerOptions Object .............................................................................................................. 168
Properties ................................................................................................................................. 168
Example ................................................................................................................................... 169
See Also ................................................................................................................................... 171
TileSource Class.......................................................................................................................... 171
Constructor ............................................................................................................................... 171
Methods .................................................................................................................................... 171
Example ................................................................................................................................... 172
See Also ................................................................................................................................... 173
TileSourceOptions Object ............................................................................................................ 173
Properties ................................................................................................................................. 173
Example ................................................................................................................................... 174
See Also ................................................................................................................................... 176
ViewOptions Object ..................................................................................................................... 176
Properties ................................................................................................................................. 176
Remarks ................................................................................................................................... 177
Example ................................................................................................................................... 177
Microsoft.Maps.AdvancedShapes API Reference ...................................................................... 179
In This Section .......................................................................................................................... 179
EntityCollection Class (AdvancedShapes) .................................................................................. 179
Constructor ............................................................................................................................... 180
Methods .................................................................................................................................... 180
Events ...................................................................................................................................... 181
Remarks ................................................................................................................................... 183
Polygon Class (AdvancedShapes) .............................................................................................. 183
Constructor ............................................................................................................................... 183
Methods .................................................................................................................................... 184
Events ...................................................................................................................................... 185
Example ................................................................................................................................... 186
Microsoft.Maps.Directions API Reference ................................................................................... 188
In This Section .......................................................................................................................... 188
BusinessDetails Class ................................................................................................................. 189
Properties ................................................................................................................................. 189
See Also ................................................................................................................................... 190
BusinessDisambiguationSuggestion Class ................................................................................. 190
Properties ................................................................................................................................. 190
Example ................................................................................................................................... 191
See Also ................................................................................................................................... 195
DirectionsErrorEventArgs Object ................................................................................................. 195
Properties ................................................................................................................................. 195
Example ................................................................................................................................... 195
DirectionsEventArgs Object ......................................................................................................... 197
Properties ................................................................................................................................. 197
Example ................................................................................................................................... 198
DirectionsManager Class ............................................................................................................ 200
Constructor ............................................................................................................................... 200
Methods .................................................................................................................................... 200
Events ...................................................................................................................................... 204
Example ................................................................................................................................... 206
DirectionsRenderOptions Object ................................................................................................. 208
Properties ................................................................................................................................. 208
Example ................................................................................................................................... 211
DirectionsRequestOptions Object ............................................................................................... 213
Properties ................................................................................................................................. 213
Example ................................................................................................................................... 215
DirectionsStep Class ................................................................................................................... 217
Properties ................................................................................................................................. 217
Example ................................................................................................................................... 218
DirectionsStepEventArgs Object ................................................................................................. 221
Properties ................................................................................................................................. 221
Example ................................................................................................................................... 222
DirectionsStepRenderEventArgs Object ..................................................................................... 225
Properties ................................................................................................................................. 225
Example ................................................................................................................................... 225
DirectionsStepWarning Class ...................................................................................................... 228
Properties ................................................................................................................................. 228
Example ................................................................................................................................... 228
Disambiguation Class .................................................................................................................. 231
Properties ................................................................................................................................. 231
Example ................................................................................................................................... 232
See Also ................................................................................................................................... 235
DisambiguationRenderEventArgs Object .................................................................................... 235
Properties ................................................................................................................................. 236
DistanceUnit Enumeration (AJAX) .............................................................................................. 236
Constants ................................................................................................................................. 236
Example ................................................................................................................................... 236
IconType Enumeration ................................................................................................................ 239
Constants ................................................................................................................................. 239
Example ................................................................................................................................... 239
LocationDisambiguationSuggestion Class .................................................................................. 242
Properties ................................................................................................................................. 242
Example ................................................................................................................................... 243
See Also ................................................................................................................................... 246
Maneuver Enumeration ............................................................................................................... 246
Constants ................................................................................................................................. 246
Example ................................................................................................................................... 250
ResetDirectionsOptions Object ................................................................................................... 253
Properties ................................................................................................................................. 254
Route Class (AJAX) ..................................................................................................................... 254
Properties ................................................................................................................................. 254
RouteAvoidance Enumeration ..................................................................................................... 254
Constants ................................................................................................................................. 254
RouteLeg Class (AJAX) ............................................................................................................... 255
Properties ................................................................................................................................. 256
Example ................................................................................................................................... 256
RouteMode Enumeration ............................................................................................................. 258
Constants ................................................................................................................................. 258
RouteOptimization Enumeration (AJAX) ..................................................................................... 259
Constants ................................................................................................................................. 259
RoutePath Class (AJAX) ............................................................................................................. 260
Properties ................................................................................................................................. 260
RouteResponseCode Enumeration ............................................................................................. 260
Constants ................................................................................................................................. 260
Example ................................................................................................................................... 262
RouteSelectorEventArgs Object .................................................................................................. 264
Properties ................................................................................................................................. 264
RouteSelectorRenderEventArgs Object ...................................................................................... 265
Properties ................................................................................................................................. 265
RouteSubLeg Class ..................................................................................................................... 265
Properties ................................................................................................................................. 265
RouteSummary Class (AJAX) ..................................................................................................... 266
Properties ................................................................................................................................. 266
Example ................................................................................................................................... 267
RouteSummaryRenderEventArgs Object .................................................................................... 269
Properties ................................................................................................................................. 269
StepWarningStyle Enumeration .................................................................................................. 270
Constants ................................................................................................................................. 270
Example ................................................................................................................................... 270
TimeType Enumeration ............................................................................................................... 274
Constants ................................................................................................................................. 274
Example ................................................................................................................................... 274
See Also ................................................................................................................................... 276
TransitLine Class ......................................................................................................................... 276
Properties ................................................................................................................................. 277
Example ................................................................................................................................... 277
TransitOptions Object .................................................................................................................. 280
Properties ................................................................................................................................. 280
Example ................................................................................................................................... 281
Waypoint Class (AJAX) ............................................................................................................... 283
Constructor ............................................................................................................................... 283
Methods .................................................................................................................................... 283
Events ...................................................................................................................................... 285
Example ................................................................................................................................... 286
WaypointEventArgs Object .......................................................................................................... 289
Properties ................................................................................................................................. 289
WaypointOptions Object .............................................................................................................. 290
Properties ................................................................................................................................. 290
Example ................................................................................................................................... 291
WaypointRenderEventArgs Object .............................................................................................. 293
Properties ................................................................................................................................. 293
Microsoft.Maps.Overlays.Style Reference .................................................................................. 294
Navigation Bar Style ................................................................................................................. 294
Microsoft.Maps.Search API Reference ....................................................................................... 295
In This Section .......................................................................................................................... 295
Address Class (AJAX) ................................................................................................................. 296
Properties ................................................................................................................................. 296
GeocodeLocation Class (AJAX) .................................................................................................. 297
Properties ................................................................................................................................. 297
GeocodeRequestOptions Object ................................................................................................. 297
Properties ................................................................................................................................. 297
Example ................................................................................................................................... 298
See Also ................................................................................................................................... 300
GeocodeResult Class (AJAX) ..................................................................................................... 300
Properties ................................................................................................................................. 300
LocationPrecision Enum .............................................................................................................. 301
Constants ................................................................................................................................. 301
MatchCode Enum ........................................................................................................................ 301
Constants ................................................................................................................................. 301
MatchConfidence Enum .............................................................................................................. 302
Constants ................................................................................................................................. 302
PlaceResult Class........................................................................................................................ 302
Properties ................................................................................................................................. 302
ReverseGeocodeRequestOptions Object ................................................................................... 303
Properties ................................................................................................................................. 303
Example ................................................................................................................................... 303
See Also ................................................................................................................................... 305
SearchManager Class ................................................................................................................. 305
Constructor ............................................................................................................................... 305
Methods .................................................................................................................................... 305
Example ................................................................................................................................... 307
SearchParseResult Class ............................................................................................................ 308
Properties ................................................................................................................................. 309
SearchRegion Class (AJAX) ....................................................................................................... 309
Properties ................................................................................................................................. 309
SearchRequestOptions Object .................................................................................................... 310
Properties ................................................................................................................................. 310
Example ................................................................................................................................... 311
See Also ................................................................................................................................... 313
SearchResponse Class (AJAX) ................................................................................................... 313
Properties ................................................................................................................................. 313
See Also ................................................................................................................................... 313
SearchResponseSummary Class ................................................................................................ 314
Properties ................................................................................................................................. 314
SearchResult Class ..................................................................................................................... 314
Properties ................................................................................................................................. 314
Microsoft.Maps.Themes.BingTheme API Reference .................................................................. 315
BingTheme Features ................................................................................................................ 315
Example ................................................................................................................................... 316
Microsoft.Maps.Traffic API Reference ......................................................................................... 317
In This Section .......................................................................................................................... 317
TrafficLayer Class ........................................................................................................................ 317
Constructor ............................................................................................................................... 317
Methods .................................................................................................................................... 318
Example ................................................................................................................................... 318
Microsoft.Maps.VenueMaps API Reference ............................................................................... 319
In This Section .......................................................................................................................... 319
Directory Class ............................................................................................................................ 320
Methods .................................................................................................................................... 320
Events ...................................................................................................................................... 322
Example ................................................................................................................................... 323
DirectoryGrouping Enumeration .................................................................................................. 327
Constants ................................................................................................................................. 327
DirectorySortOrder Enumeration ................................................................................................. 327
Constants ................................................................................................................................. 328
Floor Class ................................................................................................................................... 328
Properties ................................................................................................................................. 328
Example ................................................................................................................................... 328
Footprint Class ............................................................................................................................. 331
Properties ................................................................................................................................. 331
Example ................................................................................................................................... 331
Metadata Class ............................................................................................................................ 333
Properties ................................................................................................................................. 333
Example ................................................................................................................................... 334
NearbyVenue Class ..................................................................................................................... 336
Properties ................................................................................................................................. 336
Example ................................................................................................................................... 336
NearbyVenueOptions Object ....................................................................................................... 338
Properties ................................................................................................................................. 338
Example ................................................................................................................................... 338
Polygon Class (Venue Map) ........................................................................................................ 340
Properties ................................................................................................................................. 340
Primitive Class ............................................................................................................................. 340
Properties ................................................................................................................................. 341
Methods .................................................................................................................................... 341
Example ................................................................................................................................... 342
VenueMap Class ......................................................................................................................... 344
Properties ................................................................................................................................. 344
Methods .................................................................................................................................... 345
Events ...................................................................................................................................... 345
Example ................................................................................................................................... 346
VenueMapCreationOptions Object .............................................................................................. 348
Properties ................................................................................................................................. 348
Example ................................................................................................................................... 349
VenueMapFactory Class ............................................................................................................. 350
Constructor ............................................................................................................................... 350
Methods .................................................................................................................................... 351
Example ................................................................................................................................... 351
Bing Maps AJAX Control 7.0 Supported Browsers ..................................................................... 353
Supported Browsers ................................................................................................................. 353
Bing Maps AJAX Control 7.0 Developer Resources ................................................................... 354
Developer Resources ............................................................................................................... 354
Account Issues ......................................................................................................................... 354
Licensing Questions ................................................................................................................. 354
14
Bing Maps AJAX Control, Version 7.0
Bing Maps is an online mapping service that enables users to search, discover, explore, plan,
and share information about specific locations. By using enhanced road maps, labeled aerial
photo views, and low-angle high-resolution aerial photos, Bing Maps AJAX Control 7.0, in
conjunction with the Bing Maps REST Services, provides unique opportunities for developers to
incorporate both location and local search features into their Web applications, as well as into
Metro style apps (see Developing a Metro Style App).
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.0 application programming interface
(API). For extra code snippets and feature samples, the Bing Maps AJAX Control 7.0 Interactive
SDK is also available.
If you are reading this help file online, you can download either the CHM or PDF version of this
SDK for offline viewing.
If you are looking for documentation for the legacy AJAX Map Control, see Bing Maps AJAX
Control, Version 6.3 SDK.
In This Section Getting Started with the 7.0 Map Control
What's New in the AJAX Map Control
Developing with the 7.0 Map Control
Microsoft.Maps API Reference
Microsoft.Maps.AdvancedShapes API Reference
Microsoft.Maps.Directions API Reference
Microsoft.Maps.Overlays.Style Reference
Microsoft.Maps.Search API Reference
Microsoft.Maps.Themes.BingTheme API Reference
Microsoft.Maps.Traffic API Reference
Microsoft.Maps.VenueMaps API Reference
Supported Browsers
Developer Resources
See Also Terms and Conditions
15
Getting Started with the 7.0 Map Control
The Bing Maps AJAX Control 7.0 is a JavaScript control that contains the objects, methods, and
events that allow you to display maps powered by Bing Maps on your Web site. The sections in
this topic describe the steps you need to take to start using the Bing Maps AJAX Control 7.0.
Create a Bing Maps Account and Get a Key Before you begin developing your application, you need to create a developer account on the
Bing Maps Account Center. A Bing Maps Developer Account allows you to create a Bing Maps
Key to use in your map application. Getting a key is described in Getting a Bing Maps Key.
When the Bing Maps AJAX Control 7.0 is loaded with a valid Bing Maps Key, Bing Maps
counts sessions. A session begins with the load of the Bing Maps AJAX Control 7.0 into a
users browser and includes all Bing Maps AJAX Control 7.0 interactions until the
browser is closed or the user moves to a different page. Detailed information about Bing
Maps usage reports is found in Viewing Bing Maps Usage Reports.
Get Familiar with the Bing Maps AJAX 7.0 Control The Developing with the 7.0 Map Control section of this SDK contains topics that describe how to
use the features provided by the AJAX map control.
What's New in the AJAX Map Control
Welcome to the latest release of the Bing Maps AJAX Control 7.0!
New Features This release of the map control includes the following new features:
Render complex shapes Create polygons with holes using the new
Microsoft.Maps.AdvancedShapes module.
Use the latest Bing Maps design Load the Microsoft.Maps.Themes.BingTheme to provide
your customers with the latest Bing Maps site look.
Search Geocode an address, reverse geocode to match a location to an address, and
search nearby points of interest using the new Microsoft.Maps.Search module.
Calculate driving directions Use the new Microsoft.Maps.Directions module to easily
calculate directions and display a route on your map.
Display a venue map Discover and display maps for nearby venues such as malls and
shopping centers using the Microsoft.Maps.VenueMaps module.
16
Show current traffic Show or hide current traffic on the map using the
Microsoft.Maps.Traffic module.
Use the new Bing Maps navigation control Load the Microsoft.Maps.Overlay.Styles
module and then set the customizeOverlays map option to use the new Bing Maps navigation
control on your map.
Developing with the 7.0 Map Control
The topics in this section will help you to start using the Bing Maps AJAX Control 7.0.
In This Section Loading the AJAX Map Control
Setting Map Control Parameters
Changing the Map View
Adding Entities to the Map
Customizing Your Pushpins
Displaying Location Search Results Using the REST Services
Calculating Directions Using the Directions Module
Working with Tile Layers
Using Events in the AJAX Control
Returning a Localized Map
Building Your Own Module
Developing a Metro Style App
Loading the AJAX Map Control
This topic describes how to load the Bing Maps AJAX Control 7.0 into your Web page to display a
map. This is the first step you need to take for any page that uses the map control.
Displaying the Default Map Displaying the default map, which includes all of the navigation functionality, consists of the
following steps:
1. At the top of the HTML page add the following DOCTYPE declaration.
2. In the header section of an HTML page, add a META element with the charset attribute set
to "utf-8", as follows.
17
It is recommended that you use UTF-8 encoding in your web page.
3. Also in the header section, add a reference to the map control, as follows.
To use SSL, add the s parameter to the reference as shown below.
4. In the body of the page, add a DIV element to the page to contain the map. The size of the
map is defined by the height and width of the DIV element. The position of the map is set by
using the "position", "top", and "left" properties. You can set these values either inline or by
defining the values in a style class and then referencing that class, as follows.
or
.map {
position: absolute;
top: 20;
left: 10;
width: 400px;
height: 400px;
border:#555555 2px solid;
}
...
If you do not specify a width/height, the width/height of the div is used. For cross-
browser compatibility, you should always specify the position attribute (both
"absolute" and "relative" are valid values). If you use a percentage width and or
height in the map DIV, it is the percentage of the parent width or height, respectively.
18
The navigation control, map type selector, and breadcrumb may not work properly if
you use margin to position the map. Use CSS absolute or relative positioning instead.
5. Next, within a new script tag, create a function that can be called when your web page loads.
function GetMap()
{
}
Modify the body tag so that the GetMap function is called onload.
6. Finally, create an instance of the Map Class in the GetMap function. You also need to include
a map options object to contain your credentials, which is your Bing Maps Key. See the
Getting a Bing Maps Key topic.
var map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials:"Your Bing Maps Key"});
The full code is below.
function GetMap()
{
19
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials:"Your Bing Maps Key"});
}
Customizing the Map When Loading You can also specify other options when the map is first loaded, such as the location, zoom level,
and the imagery of the map. To do this, pass in MapOptions or ViewOptions to the Map
constructor. The code below sets the imagery to Aerial.
var mapOptions = {
credentials: "Your Bing Maps Key",
mapTypeId: Microsoft.Maps.MapTypeId.aerial
}
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
Example The following code shows a complete Web page that loads a map. Valid map types are found in
the MapTypeId Enumeration topic.
20
function GetMap()
{
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials: "Your Bing Maps Key",
center: new Microsoft.Maps.Location(45.5, -122.5),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 7});
}
Setting Map Control Parameters
This topic describes map control parameters.
Parameters The following table contains available parameters for the map control reference.
Parameter Values Description
v 7.0 Specifies a major API version.
The default value is the latest
version, which is 7.0.
s 0, 1 Specifies whether to use SSL.
Set this value equal to 1 to use
SSL. The default value is 0.
mkt See the Returning a
Localized Map topic for a list
of values.
Specifies the market to use,
which defines the language Bing
Maps AJAX Control 7.0 uses.
The default value is "en-US"
21
Parameter Values Description
(English).
onscriptload A string specifying a function
name.
Specifies the name of a
JavaScript function to call when
the map control script is loaded.
The name must contain only
alphanumeric characters.
The CSS and tiles will not be
loaded when this function is
called.
This parameter is useful for
loading the map control
asynchronously, which can
improve your site performance
by allowing the map control
script to load in parallel with
other content.
Setting Parameters To add a parameter to the map control src URL, add a "?", the parameter, and set it "=" to one of
the allowable values. Use "&" to separate parameters.
The following example sets the map control version to 7.0 and the market to Italian.
See Also Loading the AJAX Map Control
Returning a Localized Map
Changing the Map View
This topic describes how to change the map that is displayed.
22
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.
The code below initializes the map with a specific view. The imagery displayed is set to Birds eye
using the mapTypeId option. Valid map type IDs are listed in the MapTypeId Enumeration topic.
function GetMap()
{
var mapOptions = {
credentials: "Your Bing Maps Key",
center: new Microsoft.Maps.Location(47.592, -122.332),
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
zoom: 17,
showScalebar: false
}
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
}
23
Changing the Map View If you want to change the map after it has loaded, use the setView method of the Map Class. The
ViewOptions Object contains available options that can be set.
The example below sets the map view to the specified zoom level.
var map = null;
function GetMap()
{
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:
"Your Bing Maps Key", mapTypeId: Microsoft.Maps.MapTypeId.road});
}
function SetZoom()
{
var zoomLevel = parseInt(document.getElementById('txtZoom').value);
map.setView({zoom:zoomLevel});
}
24
Zoom Level:
To set the boundaries of the view instead of centering on a point, use the bounds option as shown
in the code below.
var map = null;
function GetMap()
{
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:
"Your Bing Maps Key"});
var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new
Microsoft.Maps.Location(47.618594, -122.347618), new Microsoft.Maps.Location(47.620700, -
122.347584), new Microsoft.Maps.Location(47.622052, -122.345869));
map.setView({ bounds: viewBoundaries});
25
}
Adding Entities to the Map
This topic describes how to add entities to the map. An Entity can be any one of the following
types: Polygon, Polyline, Pushpin, TileLayer, or EntityCollection. Information about working with
tile layers is in the Working with Tile Layers topic.
Adding Single Entities to the Map To add a pushpin, polygon, or polyline to the map, simply create your object then add the entity to
the entities property of the map.
Adding a Pushpin
The following code adds a pushpin to the center of the map with the label 1.
function GetMap()
26
{
// Initialize the map
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials:"Your Bing Maps Key"});
// Retrieve the location of the map center
var center = map.getCenter();
// Add a pin to the center of the map
var pin = new Microsoft.Maps.Pushpin(center, {text: '1'});
map.entities.push(pin);
}
To add a pushpin to a custom latitude and longitude coordinate, pass the Location object to the
Pushpin constructor, then set the view based on the location as shown below.
var map = null;
27
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
{credentials:"Bing Maps Key"});
// Define the pushpin location
var loc = new Microsoft.Maps.Location(47.592, -122.332);
// Add a pin to the map
var pin = new Microsoft.Maps.Pushpin(loc);
map.entities.push(pin);
// Center the map on the location
map.setView({center: loc, zoom: 10});
}
Adding a Shape
To add a polyline or a polygon, use the same method used to add a pushpin. First, create your
shape then add it to the entities property of the map. The following code adds a purple polygon to
the map.
28
function GetMap()
{
// Initialize the map
var map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key"});
// Create a polygon
var vertices = new Array(new Microsoft.Maps.Location(20,-20), new
Microsoft.Maps.Location(20,20), new Microsoft.Maps.Location(-20,20), new
Microsoft.Maps.Location(-20,-20), new Microsoft.Maps.Location(20,-20));
var polygoncolor = new Microsoft.Maps.Color(100,100,0,100);
var polygon = new Microsoft.Maps.Polygon(vertices,{fillColor: polygoncolor,
strokeColor: polygoncolor});
// Add the polygon to the map
map.entities.push(polygon);
}
29
Adding Multiple Entities to the Map If you want to add multiple entities to the map at one time, first create an EntityCollection then
add this collection to the map. The code below adds a polygon with pushpins at its corners.
function GetMap()
{
// Initialize the map
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials:"Your Bing Maps Key"});
// Create the locations
var location1 = new Microsoft.Maps.Location(20,-20);
var location2 = new Microsoft.Maps.Location(20,20);
var location3 = new Microsoft.Maps.Location(-20,20);
var location4 = new Microsoft.Maps.Location(-20,-20);
// Create a polygon
var vertices = new Array(location1, location2, location3, location4,
location1);
var polygoncolor = new Microsoft.Maps.Color(100,100,0,100);
var polygon = new Microsoft.Maps.Polygon(vertices,{fillColor: polygoncolor,
strokeColor: polygoncolor});
// Create the entity collection with the polygon and pushpins at each corner
30
var polygonWithPins = new Microsoft.Maps.EntityCollection();
polygonWithPins.push(polygon);
polygonWithPins.push(new Microsoft.Maps.Pushpin(location1));
polygonWithPins.push(new Microsoft.Maps.Pushpin(location2));
polygonWithPins.push(new Microsoft.Maps.Pushpin(location3));
polygonWithPins.push(new Microsoft.Maps.Pushpin(location4));
// Add the shape to the map
map.entities.push(polygonWithPins)
}
Changing Entities on the Map Once entities have been added to the map, you can use the methods of the map entities
collection to change and manipulate those entities. The code implements a button to change the
color of a shape on the map.
31
var map = null;
// Define colors
var blue = new Microsoft.Maps.Color(100, 0, 0, 200);
var green = new Microsoft.Maps.Color(100, 0, 100, 100);
var purple = new Microsoft.Maps.Color(100, 100, 0, 100);
function GetMap()
{
// Initialize the map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key"});
// Create the locations
var location1 = new Microsoft.Maps.Location(20,-20);
var location2 = new Microsoft.Maps.Location(20,20);
var location3 = new Microsoft.Maps.Location(-20,20);
var location4 = new Microsoft.Maps.Location(-20, -20);
var location5 = new Microsoft.Maps.Location(40, 0);
// Create some shapes
var triangleVertices = new Array(location1, location2, location5, location1);
var triangle = new Microsoft.Maps.Polygon(triangleVertices, { fillColor:
blue, strokeColor: blue });
var squareVertices = new Array(location1, location2, location3, location4,
location1);
var square = new Microsoft.Maps.Polygon(squareVertices,{fillColor: purple,
strokeColor:purple});
// Add the shapes to the map
32
map.entities.push(triangle);
map.entities.push(square);
}
function ChangePolygonColor()
{
// Get the map square entity. We know square was the last entity added,
// so we can calculate the index.
var mapSquare = map.entities.get(map.entities.getLength()-1);
// Get the current color
var currentColor = mapSquare.getFillColor();
if((currentColor.toString()) == (purple.toString()))
{
// Change it to green
mapSquare.setOptions({fillColor: green, strokeColor:green});
}
else
{
// Change it back to purple
mapSquare.setOptions({fillColor:purple, strokeColor:purple});
}
}
33
Customizing Your Pushpins
The Bing Maps AJAX Control, Version 7.0 provides flexible pushpin functionality. Use options
provided in the PushpinOptions Object to customize your pushpins.
This topic describes how to customize your pushpin icon as well as how to create a pushpin info
box.
Customizing Your Pushpin Icon If you do not want to use the default pushpin icon, you can set the icon property of the
PushpinOptions to the image you want to use instead.
This example uses the image below, named BluePushpin.png, as the pushpin icon.
var map = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
{credentials:"Bing Maps Key"});
34
// Retrieve the location of the map center
var center = map.getCenter();
// Add a pin to the center of the map, using a custom icon
var pin = new Microsoft.Maps.Pushpin(center, {icon: 'BluePushpin.png', width:
50, height: 50, draggable: true});
map.entities.push(pin);
}
Creating a Pushpin Infobox The Bing Maps AJAX Control, Version 7.0 has built-in pushpin info box functionality which you
can customize to suit the needs of your application. To create an info box, use the Infobox and
InfoboxOptions types.
The example below shows how to display an info box when a pushpin is clicked.
35
var map = null;
var pinInfobox = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
{credentials:"Bing Maps Key"});
// Retrieve the location of the map center
var center = map.getCenter();
// Add a pin to the center of the map
var pin = new Microsoft.Maps.Pushpin(center, {text: '1'});
// Create the infobox for the pushpin
pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
{title: 'My Pushpin',
description: 'This pushpin is located at (0,0).',
visible: false,
offset: new Microsoft.Maps.Point(0,15)});
// Add handler for the pushp
