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. 

Posted on February 14, 2008 07:05 by Haider

Comments

March 11. 2008 04:18

PWDeveloper

This is superb. I need to do the same for UK address, can you help.

PWDeveloper

March 11. 2008 19:59

Abu Haider

These controls will work for UK and any other place as long google has the data. I just looked up directions between two locations in UK using the sample page:

www.haiders.net/Samples/GoogleMaps_Directions.aspx

Abu Haider

April 21. 2008 12:13

MikeW

I'm trying to use this in a webpage, but I can't seem to get it to work.  If I statically put the values in, it will work. But when I attempt to adjust it on page load, I can't see any of the public members of the UserControl.  Maybe I just have something setup wrong in the project, I'm kind of a noob at this.  Do you have the sample project files yet?

Thanks for your help.

MikeW

July 18. 2008 02:45

deus

Hello.
Very nice Control!
But I have to admit, that I have the same problem like MikeW. In the btnLoad_Click the members like gdirections.FromAddress could not be found.
This is the Error-Message from the Studio:
"Error  1  'System.Web.UI.UserControl' does not contain a definition for 'FromAddress' and no extension method 'FromAddress' accepting a first argument of type 'System.Web.UI.UserControl' could be found (are you missing a using directive or an assembly reference?)"

Do you have any idea??

deus

September 28. 2008 12:04

hurikhan

Hello

Can you tell me, is there same way to use GoogleMaps Driving Directions API as a web service? I want just retrieve raw data as xml, within my desktop application. Thanks

hurikhan

October 7. 2008 01:22

Mike Boulton

This wrapper does work for UK but you have to put in UK in the search box. Is there any way of setting the googlemap locale to UK

thanks

Mike

Mike Boulton

January 4. 2009 20:37

Atul Yadav

This is superb.
i also want to find driving distance within X KM range.
can you help in this?

Atul Yadav

January 6. 2009 17:45

Randyb

I can run the control in an web app and compile it fine in VS2008.  When I try to publish it I get the following error messages:

error BC30456: 'FromAddress' is not a member of 'System.Web.UI.UserControl'.
error BC30456: 'ToAddress' is not a member of 'System.Web.UI.UserControl'.

I love the simplicity of the control but I cannot get it to publish to a site so I am not able to use it...

I see several people had similar issues but I don't know if they got past it or not...

Please help!!!

Thanks,

Randyb

Randyb

April 3. 2009 12:10

laurie

i'm also receiving the same error as mentioned above;

FromAddress' is not a member of 'System.Web.UI.UserControl'.
error BC30456: 'ToAddress' is not a member of 'System.Web.UI.UserControl'.

what is the trick here? how do i properly reference the single file control?

laurie

April 7. 2009 06:21

laurie

for those who are having the "not a member" issue, i used the following website to turn the single file user control file into a redistributable custom control. I may have done a little tweaking as far as the register tag, but that fixed my problem.

blogs.msdn.com/.../487160.aspx

laurie

April 21. 2009 01:01

Chris

To Fix the above issue, add a } after line 50 in Sample.ascx.cs

Chris

August 11. 2009 19:14

Dzenad

Can this be used with ajax UpdatePanel?

Dzenad

October 29. 2009 02:53

pratik

hi there i m new to the google maps directions. i have a project in which i need to design an a page in which a map is loaded alone with the driving directions for a location by the users input in the textbox i think ur control wud work for me. but as i am new i m not sure how to work on it can juss let me know the steps to configure the google map

your help would be appreciated

Thanks

pratik

December 10. 2009 12:03

kannankeril

Thank you. This was so easy, I feel guilty using it.

I made some dumb errors in my earlier post and have no way to edit it so I am re-posting the corrections. If possible please ignore/delete the earlier post.

No one seems to have mentioned a usage problem but the map would not render when I inserted the runat="server" attribute in the div element. Just a habit of mine, in case someone has the same problem.

Further this would have saved me a few minutes so I am including an example of usage in hope that it helps someone else.

Start by adding the control to your project.
Next add the following tag immediately after your <%@ Page.. directive
on your ASPX page:
  <%@ Register TagPrefix="FVu" TagName="GoogleMap" Src="GoogleDrivingDirections.ascx" %>

Finally include something along the following lines somewhere within your ASPX code (the outer div is optional). Note, avoid inserting it within <p></p> tags. These gave me some javascript exceptions.

<div runat="server" style="width: 850px">
  <div id="googleDirectionsDiv" style="width:48%;float:left">
    <FVu:GoogleMap ID="GoogleMap1" runat="server" AutoLoad="true"
        FromAddress="your from address here"
        ToAddress="your to address here"
        MapElementID="dmap" />    
  </div>
  <div id="dmap" style="width:48%;height:400px;border:solid 1px
       #99d;float:right">
  </div>
</div>  

kannankeril

March 26. 2010 02:16

Tanvir Ahmed Gaus

Salam Haidar Bhai,
This is great!! I want to have a similar 1 for 1 of my clients. But I'm a PHP developer and need a PHP wrapper similar to the .net control that you built. Can you guide me a little on this? You can PM me also at bananics in Yahoo! messenger.

Others please let me know if anyone have a PHP wrapper on this Driving direction api Smile

Tanvir Ahmed Gaus

July 28. 2010 01:01

Syed Ali

Good Control, thanks for sharing.
I've been looking to get the "Road travelling" distance between two UK postcodes. Google provides this functionality so does your wrapper, however, is there any way to just obtain "mileage" from this wrapper? If not, I appreciate if you could point me out in the right direction.

Thanks in advance.

Cheers!

Syed Ali

Don't Post SPAM

If you are posting a commment just to get a link, don't waste your time!

I have a sophisticated comment moderation system in place, and your comment will not be posted.

Add comment




biuquote
  • Comment
  • Preview
Loading