Embedding a Map into Your Web Page

  • Article

This documentation is no longer available on MSDN, however it is available as a CHM download.

This topic describes how to put a simple Silverlight map onto your Web page.

Note

If you are interested in using JavaScript to access the Bing Maps Silverlight Control functionality, see the Accessing the Control Using Script topic.

If you want the full functionality of the Bing Maps Silverlight Control, then you need to create a Silverlight application that loads the Bing Maps Silverlight Control. This is described in the Creating a Basic Application Using the Silverlight Map Control 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" 
"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/silverlight/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/silverlight/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/silverlight/{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

Creating a Basic Application Using the Silverlight Map Control