Using the Bing Maps API

This article will explore how to add the Bing Maps API to a website. Bing Maps provides an interactive AJAX SDK (found at: www.microsoft.com/maps/isdk/ajax) that allows the user to choose what aspects to include on their Bing map. The users can switch between the visual map, the source code, references for the code used and more information about the SDK and Bing Maps API. The user simply needs to choose the map options they wish to have on their map and copy and paste the code into their website.

In this article, we will be using WebMatrix. Microsoft WebMatrix is a free tool that allows you to create, customize and publish websites. It’s amazingly easy to use, and can be downloaded from www.microsoft.com/web/webmatrix. We’ll be using this tool as we go along this tutorial.

WebMatrix gives you a number of different ways that you can create a new web site. You can use an existing open source application such as WordPress, Joomla, DotNetNuke or Umbraco, or you can create a site yourself by either coding everything or by using a small, simple template.

Create a website with WebMatrix

Open WebMatrix once it is downloaded and installed. On the WebMatrix Welcome Screen you will see the different options you have for creating a new application. Choose “Templates.”

image

For this article we will be using an empty site.  Choose “Empty Site” and give it a name.

image

We will be taken to our WebMatrix workspace.

image

Before we can create a new webpage, we have to navigate to our files workspace. To get to our files workspace, click on “files” on the lower left of WebMatrix or “Browse your files” in the middle of your screen.

Click the files workspace and create a new .cshtml file.

image

We now have a blank .cshtml page that is HTML5 compatible. It should look like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>

Let's get started adding our Bing Map to our website.

Adding a Bing Map to your Website

Adding a simple Bing Map to your site is quite easy. It just requires a little JavaScript and a <div> for the map.

The first thing we need to do is to add our JavaScript function that creates a new Map and loads it onto our page.

In the <head> of our webpage, add:

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/MapControl/mapcontrol.ashx?v=6.3c">
</script>
<script type="text/javascript">
    var map = null;
    function GetMap() {
        map = new VEMap('myMap');            
        map.LoadMap();
    }
</script>

We now have our function that creates our Bing map. Next, we need to call the function in our webpage.

We want our map to load when our page loads. This means that we will call our JavaScript function with an "onload" event. Add to the <body> of your webpage:

<body onload="GetMap();">
    <div style="width:630px; background-color: #E0E0E0; height: 500px; border: 1px solid black">
        <h1 align="center">Bing Maps</h1>
        <div id='myMap' style="position:relative; width:600px; height:400px; margin-left:15px"></div>
    </div>
</body>

When the body of the page loads, the GetMap method we wrote will be called, and the Bing map will be displayed in our <div> tag.

Run your file by clicking the "run" button on the menu ribbon. We are presented with the Bing default map of the United States.

image

Fortunately, the VEMap function that loads the map has several parameters that you can specify.

Show a Specific Location on your Bing Map

To show a specific location, you can simply find the latitude and longitude of the location and supply it to the LoadMap() function. In our webpage, replace:

map.LoadMap();
With:
map.LoadMap(new VELatLong(47.62054, -122.34947), 16, VEMapStyle.Road, false);

Here we have defined our latitude and longitude coordinates to be the Seattle Space Needle. This means that these coordinates are the center of the map. Therefore if we were to call the map’s GetCenter() method, we would be returned the same coordinates.

In addition to that, 3 other parameters have been defined: zoom, style, and showswitch.

  • Zoom: the zoom level to display. The valid range is between 1 and 19 – the default is 4
  • Style: specifies the map style, such as road, aerial, etc. The default is Road.
  • ShowSwitch: specifies whether to show the map mode switch on the dashboard. Default is true. (Note: if showswitch is true, the user cannot move or arrange the location viewpoint of the map)

Run your page again.

image

We now have a map with a specific location set but what if we want to specify an exact location? One way to do this is to add a pushpin to this location.

Add a Pushpin to your Map

To add a pushpin, we must first create a new VEShape. Add to your JavaScript GetMap() function in the <head> of your webpage:

var pinpoint = map.GetCenter();      
shape = new VEShape(VEShapeType.Pushpin, pinpoint);
shape.SetTitle("Seattle Space Needle");
shape.SetDescription("This is where the Seattle Space Needle is");
map.AddShape(shape);

Here we get the location where we want the pushpin to go by using the map’s GetCenter() method. If we wanted to add a pushpin to a location that was not the center of the map, we merely have to specify new LatLong coordinates like so:

var shape = new VEShape(VEShapeType.Pushpin, (new VELatLong(39.73, -105));

After creating a pushpin, you can add information to it by using the SetTitle and SetDescription methods. Then, AddShape(shape) adds the pushpin to the map we have created.

Run your file.

image

Placing our mouse over the pushpin will create a popup box with our pushpin’s title and description.

image

The VEShape class offers many more options for adding information to a map like adding polygons, polylines, custom pushpins, custom icons and many more. For more information on the VEShape class visit msdn.microsoft.com.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!