Maps for Bing by WebAssist

Download the Maps for Bing add-in. Install it following these instructions. Once you have installed the add-in, there will be a new category on your menu bar WebAssist.

Screenshot Expression Web 4 menu bar.

Step 1: To insert a map into your page select WebAssist > Build Page >  New Bing Maps Page

Screenshot WebAssist Menu items.

NOTE: If this is the first time you have used this add-in, you will be asked to insert the Serial Number. It is easiest to copy and paste this in sections as I had a difficult time trying to type this in. Once you have entered the number, you should see a green check mark. Click Activate.

Screenshot WebAssist Activation.

Step 2: The map wizard is launched. The first step requires you to enter the primary details for your map and enter your Bing Maps Key. which can be obtained for free from the Bing Maps Account Center - https://www.bingmapsportal.com/.

Once you have logged in or created an account, choose the Create or view keys option from the side navigation. (You can create up to 5 keys.)

Enter the following information:

  • Bing Maps Key: Paste the Bing Maps key that you have obtained from the Bing Maps Account Center.
  • Address/Location: Enter the complete address for the location you wish to display on the map.
  • Map Page Name: Enter the file name that you wish to be used when creating your map page.
  • Include CSS: Choose this option if you would like Maps for Bing to create a separate CSS style sheet for you to define the CSS styles for your map page.

Screenshot Create Bing Map Page 1 Wizard.

Click Next.

Step 3: The next step of the wizard allows you to enter the details on how you would like your map to appear on your page. Enter the following information:

  • Map Width (px): Enter the desired width for your map in pixels.
  • Map Height (px): Enter the desired height for your map in pixels.
  • Default Zoom Level: Specify the desired zoom level for when your map page loads. The location you specified in step 1 will remain centered on the map.
  • Default View: Choose the Default view for your map when loading. Depending on the options you specify
  • Road: Displays a street view of your map. Aerial: Displays a satellite view of your map. Bird's eye: Displays a more detailed satellite view of your map.
  • Control Dashboard Size:
    • Normal: Provides the standard Bing map control dashboard.
    • Small: Provides a smaller (less featured) control dashboard.
    • Tiny: Provides a small (minimally featured) control dashboard.
  • Distance Unit: Specify whether you wish the unit ruler to be displayed in Miles or Kilometers.

Screenshot Bing Map Wazard - page 2.

Click Next.

Step 4: You can also choose to allow your viewers to obtain driving directions to the location you specified in Step 2. The following settings allow you to configure how the driving directions will appear on your page, and how the map will display traffic.

  • Include traffic overlay: Will indicate traffic speeds for major roads and highways (when available).
  • Include driving directions on map: Will provide a text field below for display driving directions to the address/location specified in step 2.
  • Include turn by turn directions below map: Will display turn by turn directions below your map when directions are retrieved.
  • Optimize Route: Allows you to choose the type of route you wish to be retrieved when providing driving directions.
    • Distance: Will provide the shortest route to the specified location.
    • Time: Will provide the fastest route to the specified location.

Screenshot Bing Map Wizard page 3.

Click Finish.

The following three lines of code have been added to the head section of your page:

<link rel="stylesheet" type="text/css" href="webassist/bing_maps.css" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
<script type="text/javascript" src="webassist/bing_maps.js"></script>

The following line of code has been added to the body tag of your page:

<body onload="GetMap();">

Step 5: Once you have created your map page, you will want to edit the resulting page so that it matches the design of the rest of your site. If your site uses a DWT, you can attach it to your map page, HOWEVER, doing so will wipe out the code that has been added and your map will no longer work.

Rather than detach the DWT and add the lines of code back to the page, I went looking for a solution. Thanks to Cheryl Wise, I found DWT - method for making the body tag editable - a discussion on the Microsoft Forum.

Use javascript window.onload=foo; instead of <body onload="foo();"> which is what I'd recommend. See: http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html
You can create an extra editable region in the head section (of your DWT) to hold page level styles and script. I tend to use:

<!-- #BeginEditable "styleblock" -->
<style type="text/css">
/* page level styles go here */
</style>
<!-- any page level scripts go here */
<!-- #EndEditable -->

If you have added the above to your DWT, once you attach the DWT to your map page, you can then copy the first three lines of code to the appropriate sections. To the scripting area you can then add the following line of code:

<script type="text/javascript">
window.onload=function(){
GetMap();
}
</script>

Tip: You may find it easier to save a copy of the map page as a reference before attaching the DWT.

Preview your map page and check to see that it works,

Step 6: If you selected the Include CSS checkbox when in the Maps for Bing wizard, a CSS style sheet will have been created. It is located in the folder called webassist and is called bing_maps.css. This CSS style sheet provides the basic CSS styles that are used by your map. Modify the provided styles to change the way your map looks. You can either leave the style sheet for the map as a separate CSS file attached to the map page, or add the style rules to your current style sheet, or add them to the head section of the map page within the editable style block.

Preview your map page and check to see that it works and that it looks like you expect it to.,

Example:

http://huuweb.org/bing_map.html

Screenshot of Get Directions Results

Pat Geary.
Copyright © 2010 Pat Geary of Expression Web Tutorials and Templates, All Rights Reserved
Written September 2010