Displaying an Embedded Map
This topic describes how to put simple map onto your Web page.
 Note: |
|---|
| If you want the full functionality of the Bing Maps AJAX Control 6.3, then you need to use JavaScript to load the map control into your Web page. This is described in the Displaying a Map Using JavaScript topic. You can also use the core version of the map control. See Using the Core Map Control. |
Add a Simple Map
To embed a map into your Web page, add an iframe tag to your Web page and set the src parameter to the embedded map URL. The following code adds a simple Road map to a Web page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Embedded Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="font-family:Arial">
<p>A simple embedded map.</p>
<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://dev.virtualearth.net/embeddedMap/v1/ajax/road"/>
</body>
</html>
Use Embedded Map Features
You can customize your embedded map by adding parameters to the map URL. The following code sets the map style to Aerial and the zoom level to 10, then centers the map and adds a pushpin to the center.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Embedded Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="font-family:Arial">
<p>A simple embedded map.</p>
<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://dev.virtualearth.net/embeddedMap/v1/ajax/aerial?zoomLevel=10¢er=47.5_-122.5&pushpins=47.5_-122.5"/>
</body>
</html>
Embedded Map URL Parameters
The embedded map URL is in the following format:
http://dev.virtualearth.net/embeddedMap/v1/ajax/{mapMode}?zoomLevel={zoomLevel}¢er={center}&heading={heading}&pushpins={pushpins}&culture={culture}
The table below lists the available parameters for the map URL. These parameters can be in any order and are all optional.
| Parameter Name | Description |
|---|---|
mapMode | The style of the map. Valid values are: Road, Aerial, AerialWithLabels, Birdseye, BirdseyeWithLabels |
zoomLevel | An int indicating a valid zoom level for the map style. |
center | Two doubles separated by an underscore that are the latitude and longitude values of the coordinate of the center of the map. |
heading | A double specifying the orientation of the map in degrees. |
pushpins | Two doubles separated by an underscore that are the latitude and longitude values of the coordinate of the pushpin. Multiple pushpin locations are separated by a ~. |
culture | A valid culture string. The default value is “en-us”. |
