GoogleMaps Driving Directions API Wrapper Control for ASP.NET

Here is a couple of free ASP.NET user controls that provides easy access to GoogleMaps Driving Directions API functionality. With these, you can easily display driving directions on any ASP.NET Website.

I have received several requests for sample code showing how to use the directions API on an ASP.NET page. But I think the wrapper controls are going to be more helpful than some sample code. I decided to create User Controls rather than Custom Controls because user controls are easier to modify and you can simply drag and drop them to include in your ASP.NET page (in Visual Studio).

There are two user controls in the download:

1. GoogleDrivingDirections.ascx: A single file User Control that shows Google Driving Directions in a div element. It can also display a synchronized Google Map showing the route if you provide it with the ID of a div element that will hold the Map. This control does not show any input elements so you will have to assign Start Address, and Destination Address in code.
2. DirectionsAPI_Sample.ascx: This control uses the GoogleDrivingDirections.ascx control and input elements for start and end address to provide a complete example. Dropping this control on a page will instantly provide you with the ability display driving directions between any two US addresses entered by user. This control shows how to use the GoogleDrivingDirections.ascx control.

Here is a sample page that demonstrates these controls in action.

Using the GoogleDrivingDirections.ascx Control 

If you are running your project on localhost, you don't need to specify an API Key, as a key for localhost is already included. However, for production Website, you will have to obtain an API key from http://code.google.com and assign it to the APIKey Property of the control.

To display only driving direction steps without a Map, you need to assign valid addresses to the FromAddress and ToAddress properties and set AutoLoad property to True. To display a synchronized map with route, create a div element on the page that will hold the map and assign the ID of this div element to MapElementID property of the control. If this property is assigned, the control automatically loads a basic map in that div element. The map is synchronized with the directions pane and if you click on a step on the directions, a close-up of that step is automatically loaded on the map.

Because the Map is loaded in a seperate div element that you create on the page, you are free to decide the layout or position of the Directions and Map. For example, you could have the directions and map side by side, as shown on the sample page, or map above or below the directions pane.

Before you publish your site, be sure to assign a valid API Key to the APIKey property of the control. 

This control creates a Javascript object instance called _nco_dd, which you can use with client side code.  This allows loading directions without a postback.

Try the sample page or download the controls.

Hopefully soon I will be able to create a sample project showing how to use the controls with or without postbacks and some other features.