Hello everybody,
due to the success of the last 2 posts (here and here) related to ASP.NET and Google Maps API, I decided to dedicated one more post to this topic. Today, we are going to work on GRoute, GPolyline and GStep objects for creating customized maps. Maybe you are going to say that this objects was already covered by others posts, however we will use a different approach. Instead of rendering google result and instructions automatically, we are going to do this by ourselves. That’s how it works.
First of all, I will start with an application similar to that created in later posts. So, we have a map, 2 text fields and a button. After the button ‘onclick’ event, the route is displayed on the map and the instructions on the left panel, as shown the picture below:
Note that the map route and the driving directions were rendered just like magic. All you have to do is passing the map’s and panel’s container to the GDirections constructor and the API works for you. Here is the code used:
Unfortunately, you want to customize the directions result or to change route markers, just like the project that I’m working on in the last months. How use this kind of approach? The first thing is using the deafult GDirections constructor, and do not pass any parameters for it. This will avoid your map and direction’s panel from being populated. Later, you will need to include two options in GDirections.load() function: getPolyline and getSteps. Here is how the new rederPolyline function looks like.
Now, the result comes with all route’s data. For printing driving directions you should use GDirections.getRoute(i) and GRoute.getStep(i) functions, which return each single direction. For printing the route on the map, you should use GDirection.getPolyline() and GMap2.addOverlay(polyline) functions. Here is my default implementation just to demonstrate the use of the API.
In this piece of code I created a ‘ul’ element and added each direction as a new ‘li’ element and add new markers to the map ilustrating route’s origin and destination. The result is shown below:
Now it’s up to you. Use your hability and imagination for creating customized and personal maps.
For more information about the Google Maps API, visit Google Maps API Documentation.
See you.
—
Fernando
Hi,
I am new to web development and to google API’s.
Now a days I am working on a project in which I have to add the direction between two points.
But i dont want map in my results
Is it Possible??????
if yes then can you please help me with that?????
I will be very thankful to you
Hi Qamar,
I didn’t understand your context very well. But, the answer is yes. It is possible.
There are some math calculations which result in the direction between two points. Make some google on “calculate bearing between two points”.
However, if you are using Google Maps API in a web context you can use the API’s DirectionService which gives you the instructions to navigate from one point to another.
Hope it helps.
Thanks for your kind reply.
I asked that I want only textual directions in my web page not the map. Will it be possible????
Is the context clear now????
I have googled both of your terms but can’t find any desired results.
For your information I am beginner to web development. I know only the basics.
It will be very kind of you if you help me in accomplishing that.
I will be very thankful to you.