5.3 Adding directions

Google Directions allows you to map routes from one location to another. Furthermore, it allows you to display a step by step directions panel that describes each segment of the trip. You can request the route for driving, walking and bicycling. At this point in time, there is no support for public transit routing.

Setting up

We will follow up from where we left off from the last tutorial, and start with a maproom that has a search form. The search has been added to a bootstrap tabbable nav control, and some new classes have been added.

Creating the “from” and “to” input text boxes

Next, create the input form that will allow users to enter a start location (“from”), an end location (“to”), and choose a travel mode. Also, add a DIV (“directionsPanel”) that will be populated with Google’s step-by-step routing directions.

Let’s create our “Directions” form by putting it in the second tabbable nav element. Look for the DIV with id=”tab2″, and add the new form inside:

Notice that the “get directions” button (line 35) has an onClick event to run the “up206b.getDirections()” function that is described below.

Setting up the Google Directions call

In the global space, let’s first declare two variables for google directions, one to hold the directions display, and the other to activate the DirectionsService.

Now create a function that will grab the “from” and “to” values from the user input form, and then perform the direction routing. If successful, it will draw the route on the map, and display the route in our directions panel.

Once again, the getDirections function “grabs” user entered values. In this case, we have 3 inputs:

  • from
  • to
  • mode

Each input “grabbed” by jQuery and assigned a variable (from, to and selectedMode). The the three values are then passed into a request object, that is then used by the Google directionsService function.

Find the full documentation on the Google Directions Service here.

(sample code)

Leave a Reply