Embedding a Map into Your Web Page
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¢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:
https://dev.virtualearth.net/embeddedMap/v1/silverlight/{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”. |
See Also
Concepts
Creating a Basic Application Using the Silverlight Map Control