Displaying an Embedded Map

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, 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.

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&center=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}&center={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”.

Concepts

Displaying a Map Using JavaScript