GoogleMap Control driving directions sample

Before going further, I suppose you have installed the GoogleMap control to your web application/project.
Also make sure you have obtained a Google Maps API key for your web application.
You can do so on next url Google Maps API - Sign Up

For the basics of how to add control to the page, set with and height, google maps api key, zoom etc.,
check out the common samples' page

Note on using localhost
If you a testing driving direction on you local machine (under localhost) the directions won’t appear.
But when you deploy them on the public site/domain for which you have obtained the key, they will be shown properly.
That is probably protection or security issue of Google Maps API.
You can use any key on your localhost to show maps, as well.
But when it is real domain and your key is not properly issued for that domain, it will produce errors.
  • Setting up google map driving directions service
In order to set up the driving directions service of the google map you have to add one or more GoogleDirection items under Directions collection.
Here is an exmple:
<div>
    <table>
        <tr>
            <td>
                <artem:GoogleMap ID="GoogleMap2" runat="server" Zoom="4" Latitude="37.559819" Longitude="-122.210540"
                    Width="500px" Height="560px">
                    <Markers>
                        <artem:GoogleMarker Latitude="49.496675" Longitude="-102.65625" Text="BASI" />
                    </Markers>
                    <Directions>
                        <artem:GoogleDirection RoutePanelId="route" Text="San Francisco, CA to Mountain View, CA" />
                    </Directions>
                </artem:GoogleMap>
            </td>
            <td style="width: 320px; vertical-align: top;">
                <div id="route">
                </div>
            </td>
        </tr>
    </table>
</div>


Note the usage of div element with id under GoogleMap Control and the way it is used to set the RoutePanelId in the GoogleDirection item. It will be used by google maps api to render out the directions' route points.
If you omit to set the RoutePanelId, route point will not be rendered out and you can omit to add a div on the page, as well.

Have in mind you add driving directions programmaticaly, as well.
For example you can add driving direction in C# like:
GoogleMap1.Directions.Add(new GoogleDirection("route", "San Francisco, CA to Mountain View, CA"));


That's all folks.
You can take a look at a working sample of all the code above here


Happy coding ...

Any smart ideas and comments are welcome. Please do not hesitate to question me
See more about me and my works under ArtemBG | WebUtil.net

Last edited Feb 22, 2008 at 4:58 PM by velio, version 5

Comments

kissleonard May 13, 2010 at 12:14 PM 
Hi Velio,
There are other properties for DirectionsRequest, How can I add the follow properties:avoidHighways, avoidTolls, travelMode?

avinashsharma Mar 25, 2009 at 4:31 PM 
Hi All,
Am new to work with Artem Google maps.My problem is, i need to find the way-points along the route/path of direction from point A to point B. With Google map there is some thing we can do, but with ArtemGoogle map, i dont know how to do it. Any help with code/logic will be appreciable. Its very urgent for me... :-(

Geronimo2007 Nov 6, 2008 at 5:22 PM 
Hey Velio,

never mind my previous comment.
I noticed that the targetpanel en query property of the GoogleDirection class have been switched!

Regards, Geronimo

Geronimo2007 Nov 6, 2008 at 5:11 PM 
Hey Velio,

do you have any idea why adding driving directions from code behind doesn't work anymore.
I use your control for a while now and suddenly it stopped working.
When I add Directions in markup it still works.
I tried upgrading to your last version with no succes.

Regards, Geronimo

Erazer Mar 5, 2008 at 7:21 AM 
Overload failed for (prob. new version?): GoogleMap1.Directions.Add(new GoogleDirection("route", "San Francisco, CA to Mountain View, CA"));
Also ik can't get the directions to work.
This is my code:
gMap.Directions.Add(New google.GoogleDirection("route", "kloosterhofstraat 8, 8600 diksmuide", "stationstraat 23, 8780 oostrozebeke", "en_US"))
gMap.Address = "kloosterhofstraat 8, 8600 diksmuide"
gMap.BaseCountryCode = "nl"
gMap.EnableScrollWheelZoom = True
gMap.Zoom = 15
gMap.ZoomPanType = Artem.Web.UI.Controls.ZoomPanType.Large
gMap.ShowMapTypeControl = True
gMap.ShowClientClickPosition = True

Maybe something is wrong with the control?
I have a <div id='route'>

Greetings