Displaying an Embedded Map

  • Article

You are not viewing the latest version of the AJAX control. Bing Maps AJAX V7 is the recommended JavaScript control for Bing Maps. If you need this documentation, it is available in as a CHM or PDF download.

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" 
"https://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="https://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" 
"https://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="https://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:

https://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”.

See Also

Concepts

Displaying a Map Using JavaScript