Directions is the capability of Google Maps for displaying the route and directions between two location. There are three things that you must specify before you send a directions request to Google Maps.
- Origin = specify the starting point.
- Destination = specify the end point
- TravelMode = specify what mode of transport to use. You must specify it because it will give different route for different transport. Until this post launched, there are three type of transports that were supported by Google Maps, (TravelMode.DRIVING, TravelMode.WALKING, TravelMode.BICYCLING).
There are other parameter, you can find them here. For my example below, i will only use the three parameters above. You will also need two object for Directions features. They are :
- DirectionsService that will calculate the route for you with its route() method.
- DirectionsDisplay that will render the routes for you.
Okay, that's all we need to make a simple directions application. For the example, i will create a web application that will let you give a start and end point in the textbox, calculate the route and display it for you and also give the detailed text-based directions for you (like "Turn right onto bla bla bla..").
First, don't forget to add the Google Maps Javascript's script reference like below, inside the <head> tag before you use any part of Google maps.
Second, make the layout for the body element in the web. Here is the code :
Third, make the initialize function for the map and other variable for Directions capabilities.
And then, make the function for calculate the directions. It will be called when the calculate button is pressed. So the handle for this event is in calculate button's onclick.. Here is the code :
The request object has 3 properties (origin, destination and travelMode). It's the three important things that must be specified when you will send a directions request to the Google Maps. The origin and destination value is the input from user.
The directionsService object call its route() method with two parameters, the request object and the callback function that will be called when the routing process done. We must ensure the status of the result is OK before we render the route, otherwise it will not draw any route for you.
I also add load event in javascript via Google Maps' addDinListener. It will make the HTML cleaner with minimum javascript definition inside it.
That's all the code we need, you can run the web, fill some data in the text box, press the calculate button and BOOOOOMMM !!!!.... You will see that Google Maps find the directions for you. The routes or directions is rendered into blue line that connect two locations. Here is the screen shots for the web..
And here's the more deeper view.. ( Hehe.. That's my college.. ^_^ )
You can download the full source code here. Hopefully this post will help you to understand the basic of directions. There are more capabilities for the Directions features itself. You can find them in Google Maps Javascript v3 API. If you have more question, please let me know... Regards...!!! ^_^
Second, make the layout for the body element in the web. Here is the code :
Third, make the initialize function for the map and other variable for Directions capabilities.
And then, make the function for calculate the directions. It will be called when the calculate button is pressed. So the handle for this event is in calculate button's onclick.. Here is the code :
The request object has 3 properties (origin, destination and travelMode). It's the three important things that must be specified when you will send a directions request to the Google Maps. The origin and destination value is the input from user.
The directionsService object call its route() method with two parameters, the request object and the callback function that will be called when the routing process done. We must ensure the status of the result is OK before we render the route, otherwise it will not draw any route for you.
I also add load event in javascript via Google Maps' addDinListener. It will make the HTML cleaner with minimum javascript definition inside it.
That's all the code we need, you can run the web, fill some data in the text box, press the calculate button and BOOOOOMMM !!!!.... You will see that Google Maps find the directions for you. The routes or directions is rendered into blue line that connect two locations. Here is the screen shots for the web..
And here's the more deeper view.. ( Hehe.. That's my college.. ^_^ )
You can download the full source code here. Hopefully this post will help you to understand the basic of directions. There are more capabilities for the Directions features itself. You can find them in Google Maps Javascript v3 API. If you have more question, please let me know... Regards...!!! ^_^
THANKS..
ReplyDeleteFOR INFORMASION....Post in useful for me....
Thanks.. ^_^
ReplyDelete