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. 

Google Maps API now includes driving directions

It is possible to show interactive driving directions on your Website with very minimal effort. Google Maps now includes the driving directions API, and you could embed driving directions and maps on your Website for free.

Like all other GoogleMaps feature, you are required to obtain an API key, which is free too.

We have integrated this into our Driving Directions at houselocator.com, here is an example:

http://www.houselocator.com/DrivingDirections.aspx?ID=15274&Street=&Zip=34741 

One advantage of Javascript API integration is, as Google keeps adding more features, they will automatically appear on your Website. Right now, they have a nice way of zooming into any turn on the directions. Just click on a step in the directions in the example above and see it in action.

 

Check out the Google Maps API at:  http://www.google.com/apis/maps/

Integration is really easy. 

** Update: I have written a GoogleMaps Directions API wrapper control for ASP.NET that you can use to easily integrate driving directions in your ASP.NET projects. Check the following post:

GoogleMaps-Driving-Directions-API-Wrapper-Control-for-ASPNET

 

Rendering Client Script in ASP.NET 2.0 : Behavior changes

In ASP.NET 2.0, all client script rendering functions are grouped under the ClientScriptManager class, which is availabe through Page.ClientScript property. The older script related methods on the Page class (RegisterClientScript, RegisterStartupScript etc.) are still available, but deprecated. In addition, most Script related methods now require an additional paramater: Type or Control. This helps isolate scripts generated by different types of WebControls, and would be more useful to Control developers.

There are also changes in how the script are rendered. For example, the startup script is now rendered right before the FORM (runat='server') is closed, not before the closing of the BODY element. If your Form element is wrapping everything else in the Body element, its not a problem, but if your Form is nested within other elements (within some DIV elements, for example) it may result in unexpected behavior. For example, the DOM structure may not be ready when the Startup script is executed.

Similarly, RegisterClientScript method adds scripts in the beginning of the FORM element, rather than top of the Body. And here is the biggest problem:

No FORM, No Client Script!

Thats right, if there is no Form with runat='server' on your page, these ClientScript methods will not render any script. You won't get any error message, but no script will be rendered on the Page. ASP.NET 2.0 expects that every Web page includes a server side FORM element.

To most developers used to the ways of ASP.NET, this may not be a problem. However, for Control developers, this may be a potential problem. If your Controls depend heavily on Client scripts, be aware of this behavior and possibility of ASP.NET pages not including a server side Form tag. 

It may be a good idea to include a server side Form tag on  every ASP.NET page, just to make sure all containing Controls, specially third party Controls  would function as expected.

ASP.NET TextBox in Multi Line mode, and (lack of) MaxLength Property

If you ever try to set the MaxLength property of a MultiLine TextBox in ASP.NET, it won't work. It would seem to have no effect at all. 

MaxLength Atrribute is not supported by the TextArea element 

When an ASP.NET TextBox control is set to MultiLine mode, it is rendered as a TextArea HTML element. TextArea element do not support 'MaxLength' attribute, and therefore the TextBox won't render this attribute in MultiLine mode. It won't give you any warning or throw an error, but quietly ignore this property.

Solution 

The first time I had a need to restrict length in a MultiLine TextBox, I quickly dropped a CustomValidator Control to take care of it. But later I realized a ReqularExpressionValidator could also be used for this purpose.

Here is the ValidationExpression to set the MaxLength (and also MinLength) of the input string: [^$]{MinLength,MaxLength}

Replace MinLength and MaxLength with numeric values. For example, a 100 character MaxLength with no Minimum length: [^$]{0,100}

Note:

A new line in MultiLine mode is considered two characters, because a new line is actually combination of two characters: CR and LF. I am not sure but on Unix/Linux based clients this may not be the case.

Afterthought 

Ok, it seems many people end up here looking for a solution to this MaxLength property issue, and looking at the low ratings this post has received, I am assuming that some were not very happy with the above solution.

This post was originally meant to be for developers who would know how to use a RegularExpressionValidator and ASP.NET validation in general.

The behavior with a RegularExpressionValidator does not simulate the MaxLength property exactly because it does not prevent the user from entering further characters once the limit is reached, but rather integrates with the rest of validation framework and shows a friendly message to the user. To simulate the MaxLength property exactly, you could write a small Javascript snippet to trap the OnKeyPress event of the TextArea element and discard further keystrokes once the limit is reached.

Here is an example for keeping MaxLength to 100 characters:

onkeypress="if(this.value.length>=100) return false;"

You can add this straight into the TextBox tag. If javascript is disabled on the client browser, this will simply fail, and so you still need to validate it on server side.

I personally prefer the use of validation controls as it inherently validates both client side and server side.

The solution shown here could also be used with single line TextBox if you needed to ensure a minimum length of input. 

Thanks to Mads Kristensen and BlogEngine.NET

This blog has been setup with BlogEngine.NET, an open source blog software created by Mads Kristensen. At it's current release (V 1.1.x), BlogEngine.NET is quite capable and features most functionalities I would want in a blog. It comes with several nice themes, and creating your own theme is easy too. It uses xml files for data storage and you can set it up by simply copying all files to a ASP.NET 2.0 enabled web server. Support for Sql Server data storage is also included.

I have looked into several other blog platforms (based on .NET), but BlogEngine.NET seemed like the best option available. As a matter of fact, its ease of use inspired me to setup my blog, something I have been planning to do for a long time.

Some limitations of the current version include:

• No comment approval system
• Lack of user level security to blog posts (User A can edit/delete posts by User B)
• Custom theming system and lots of HttpModules making it difficult to integrate with another application

Some of these issues are being addressed in the upcoming release, which is due in September '07.

If you are looking into setting up a stand-alone blog site, the BlogEngine.NET is a compelling option.