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 UpFor 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' pageNote on using localhostIf 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
hereHappy coding ...Any smart ideas and comments are welcome.
Please do not hesitate to question meSee more about me and my works under
ArtemBG |
WebUtil.net