How I Used The Google Directions API

Have you ever wanted to create a directions based application or have you ever used a directions app? Well the Google API is a web service that uses an HTTP request to return JSON or XML-formatted directions between locations. Using this API, you can get directions for several different forms of transportation, such as transit, driving, walking, or cycling.

With smart phones making our lives much easier and efficient. Many of us have used Map Apps such as Google Maps, Apple Maps, or MapQuest to search for possible trip destinations. With these apps, we enter where we are going (Point A) and where we would like to go (Point B). A map is then generated showing us the directions from Point A to Point B. This feature is usually accompanied by some form of readable directions the user can also follow to reach their destination.

So why am I so interested and fascinated with this Google API you ask?

Recently, I developed a Road Trip app called Road-Tripster. This application uses the Google Directions API to allow uses to get directions based a selection of locations.

While searching for the perfect API that would work with my application, I wanted something easy, free, and sophisticated in design. The Google API was perfect for this because embedding it into your code is very manageable, to use it is a accessible to anyone, and the design provides unique effects for a professional look.

Before anything can take place with the Google Directions API, you need a project with a billing account and the Directions API enabled. This will allow you to create credentials and an API key specifically for your own use.

Embedding the Google Directions API code into my Javascript was a very manageable task. Using the code provided via the google docs, I was able to generate the map onto my search page for the user to view. The google docs provide sample code that can be manipulated for your own use. Depending on the application you are developing, you can select between HTML, CSS, JS sample codes that can help you produce a map and direction functions.

For example, this request will generate directions from Toronto to Montreal and with your API key entered at the end of this URL, the content will populate onto the page.

https://maps.googleapis.com/maps/api/directions/json?
origin=Toronto&destination=Montreal
&key=YOUR_API_KEY

The Google Directions API also has a very nice design that is accessible for anyone who is looking for directions. A map like this is populated on your page.

Road-Tripster allows users to select potential direction locations based on a dropdown menu of select to and from locations. Right now the app is only generating sample locations, but with future development, I will use the Google Directions API to make the map more interactive. Here is how the app currently works.