Skip to main content

Simple Directions

    After taking an unintended long break after the 100th post, I am back with more examples and several more GIS news. Today, we will take a look at a simple example showcasing the use of the Google’s Directions Services. Using the Google’s Direction service, we can calculate the distance between two points, show the path between these two points, calculate the average time taken to traverse this distance and we can also enforce several constraints on this path.

    The Google Directions API is a service that calculates the directions between locations using an HTTP request. You may pass either an address (string) or a latitude/longitude coordinate as the origin and destination. If you pass an address as a string, the Directions service geocodes the string and converts it to a latitude-longitude coordinate to calculate directions. The origin and destination are two mandatory parameters for a directions request, whereas several other optional parameters like mode of travel, waypoints, avoid tolls, avoid highways, etc. are also used. We will be having a look at each of these parameters in subsequent examples.

    Today, we will have a look at a simple piece of code which will show a path between two pre-defined locations Pune and Mumbai in India (hard-coded example) using the directions services. Let us have a look at the code directly. I have commented the code where ever necessary.



    The output of the above code will appear as seen in the result section above. Two labeled markers will appear at the origin and destination address with a purple polyline depicting the route between the two locations. In later examples, we will see several more complex examples using the Directions Service.

    If you have any queries/ doubts regarding today’s code, please leave a comment! Hope you find this example helpful!
Labels:

Comments

  1. hiSeptember 1, 2011 at 7:50 AM

    Just find your web. I find it enormously interesting. I tested this example but could not get it to work first. Then I added
    link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css"
    and it did work.

    Perhaps it is a reason for a change of your example?

    ReplyDelete
  2. Shreerang PatwardhanSeptember 1, 2011 at 8:19 AM

    Hello Mr. Hans...Thank you for your feedback. However, I have checked my code again upon reading your comment, but it is still working fine. The map loads up properly without any issues...

    I don't understand why you are facing a problem. The style sheet that you are pointing to is not required in my code as I have set the div style in the code itself!

    As a result, I don't see any reason for a change. However, I appreciate your feedback Sir and I urge other readers to report any such similar error if they face one...

    ReplyDelete

Post a Comment

Please leave your comments here...

Recommended for You

Playing with the markers and info window bubbles...

    In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase!     So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life!     The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .
3 comments
Read more

Ground Truth - How Google Builds Maps

    Todays's article is cross posted from The Atlantic 's Tech section. The article was posted by Alexis Madrigal who is a senior editor at The Atlantic , where he oversees the Technology channel. So, thanks to The Atlantic and Alexis Madrigal, we will have an exclusive look inside Ground Truth , the secretive program to build the world's best accurate maps.     Behind every Google Map, there is a much more complex map that's the key to your queries but hidden from your view. The deep map contains the logic of places: their no-left-turns and freeway on-ramps, speed limits and traffic conditions. This is the data that you're drawing from when you ask Google to navigate you from point A to point B -- and last week, Google showed me the internal map and demonstrated how it was built. It's the first time the company has let anyone watch how the project it calls GT, or "Ground Truth," actually works.     Google opened up at a key moment in its evo
6 comments
Read more

The bitter divorce of PSD and HTML

    Today's article is an interesting post that I read. The original post in Portuguese and authored by Fabricio Teixeira  can be found at arquiteturadeinformacao  (Now don't ask me pronounce this =)).     Some are calling it the death of PSD  but I prefer calling it a "divorce". PSD and HTML are both healthy and living strong, just that they do not live together anymore. "PSD to HTML", which for years was the most accurate and sometimes the only right path to web design process, seems like has its days counted.     Firstly you draw a page in Photoshop; impeccable layout, representing exactly how the web pages would appear when opened in a browser. After a sign-off on this picture (PSD) from the client the front end developer transforms these pictures into HTML, CSS and Javascript. The assets are cut, one by one, exported from the PSD and integrated into the HTML. Plugins and new tools are created in the process and some companies even charge upto $1
5 comments
Read more

Panoramio Layer...

    Let's start with the obvious question first...What is Panoramio? Panoramio is a geolocation-oriented photo sharing website. Panoramio website was officially launched on October 3, 2005 by Joaquín Cuenca Abela and Eduardo Manchón Aguilar, two Spanish entrepreneurs and was acquired by Google in July 2007.     Accepted photos uploaded to the site can be accessed as a layer in Google Maps, with new photos being added at the end of every month. The site's goal is to allow Google Maps and Google Earth users to learn more about a given area by viewing the photos that other users have taken at that place. The website is available in several languages and can be viewed here .     You may add photos from Panoramio as a layer to your maps using the PanoramioLayer object. The PanoramioLayer renders a layer of geotagged photo icons from Panoramio on the map as a series of large and small photo icons. Let us now have a look at the following code to understand the concept in more det
2 comments
Read more

GIS Technology to identify all properties in BBMP Limits

          The Bruhat Bangalore Mahanagara Palike (BBMP) has for the last two years, been in the process of conducting a massive exercise to map the 13.87 lakh properties in the 198 wards in the city. Geographical Information System (GIS) has proven to be an effective tool for analysing and displaying thematic maps of all the roads for proper evaluation and correction of zones.            As of now, 11 lakh properties have come under the tax net. The aim of this programme, which is perhaps the first such exercise being conducted in the country on such a large scale, covering 800 square km, is to bring all properties under the tax net and ensure that the BBMP has accurate information pertaining to the properties’ dimension, built-up area, land use and classification. The process of validation of GIS maps will be completed in January 2011.           The process uses satellite digital maps of the BBMP area to generate a vector map from the information obtained. These high r
5 comments
Read more