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!

Comments

  1. 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. 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

What is GIS?

          Once I started writing this blog, I received a number of feedbacks from readers asking me to write something about what exactly GIS is. So here is some information, that will give you an idea about " What is GIS? "           A geographic information system (GIS) integrates hardware, software, and data for capturing, managing, analyzing, and displaying all forms of geographically referenced information. GIS allows us to view, understand, question, interpret, and visualize data in many ways that reveal relationships, patterns, and trends in the form of maps, globes, reports, and charts.             A GIS helps you answer questions and solve problems by looking at your data in a way that is quickly understood and easily shared. GIS technology can be integrated into any enterprise information system framework.     ...

ES6 101 - Lexical Declarations - Const

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years πŸ“†, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍

Learning React in #41Tweets

Sounds crazy, right? 😲Not really. It is possible! This is no magic pill ✨ . There is no substitute for practice and experience , but this will get you started and help you make the right decisions in your React journey. When I started with React, the sheer use of ES6 syntax and difference in the coding style, made me not want to use it. But when I learned and practiced ES6 and then learned and practiced React, that is when I truly fell in love with React 😍 I created a Twitter Moment Learning React ⚛️ which is basically a collection of #41Tweets that will get you off the ground on your React journey. I hope you like this new approach to learning React and hope it is helpful in getting you started 🀝Let me know your feedback and keep the conversation going on Twitter 🐦

Drive along - Cool coding

         This is something that will demonstrate to you the power of mapping! This is a Google Maps API v2 example, but just copy and paste the code in an html file and you will see something very cool! This will prove that mapping is real fun!          Let's have a look at the code first. Copy this code in your html file. Don't worry about the length of the code and the post in general. Just execute the code and you will surely enjoy what you see! <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title> Drive Along </title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAu3HXU_hLdVPTFGqLed_FCxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQbblEPYBGNoRsuuSU9aBfSq4VAZA" type="text/javascript"> </script> <script src="http://econym.org.uk/gmap/epoly.js" type="text/javascript"> ...

ES6 101 - For..of

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years πŸ“†, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍