Build a mobile app with Google Map and Google Directions API

What are we going to build?

With the help of the Google Directions service, we’ll create a mobile page similar to the directions example listed on the examples page for the Google Maps API.

Before you start

Tutorial level: advanced

Setting up the UI

1. In Tiggzi, enter app name and click Create.
2. Once the mobile editor loads, you should see something like this:
3. On the left-hand side click Pages > startScreen editor with an empty startScreen will open:
4. On the right-hand side in Properties-screen section select any other Swatch, change the screen size to 960 x 640, rename screen to Map.
5. From Components section drag and drop Google Map component.
6. Change its name to directionsMap. (You could go with the initially generated name, googlemap1, but a more descriptive name for the component makes it easier to reference later).
7. Change Caption in header to Google Maps with directions.
8. Clear the Address value and set the zoom to 2 to make the map show the entire world.
9. Add more components:
   1. Drag and drop Grid component (it has 2 rows and 2 columns by default, in MobileGrid Properties make 4 rows and 1 column)
   2. Put Label inside the first row of Grid (delete its default text and enter Enter your source and destination)
   3. Two input components for source and destination, delete default text (for first Input component enter From, for second - To), check them as Placeholder
   4. The last component is the Button to display directions on being clicked (change its default text to Get directions).
   5. Change the names of the inputs to inputSource and inputDestination.
   6. Open Events view (on the bottom of the screen), select the button from Components dropdown menu (Click event is set by default), then select Run Javascript action to the event. Click Add event in the editing window to leave the coding blank for now. We’ll add it later.
10. Save.

Testing the app

At this point, let’s test the app in the web browser. Although it doesn’t do anything yet, we want to see how it looks. So, click the big Test button in the upper-right of the Tiggzi screen:

You can change preview layout to make it look like this:

As you can see our main component takes just the half of the screen, so we need to give it more space.

Select Google map component and change it’s height in Properties to 380.
After testing again, it would look more like this:

Adding custom JavaScript

Once we’ve sorted out the view, let’s set up our JavaScript.

Creating the JavaScript Resource

Click Create New > JavaScript (we’ll call it directions) > click Create JavaScript

This will put you in an editor to create a custom JavaScript resource within the project. Paste in these lines:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
	directionsDisplay = new google.maps.DirectionsRenderer();
}
function displayDirections(sourceAddress, destinationAddress, map) {
	var request = {
        origin: sourceAddress,
        destination: destinationAddress,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
	directionsDisplay.setMap(map);
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      } else {
		alert("Directions query unsuccessful. Response status: " + status);
	  }
    });
}

This is slightly modified code from the directions example mentioned above. If you are not familiar with the Google Maps API you might want to check out their JavaScript API documentation to get a better grasp of what’s going on in this code.

We’ll call the initialize method once the page is loaded and the displayDirections method on button click. Let’s add the required events and actions.

Adding a Load event to the page

1. After closing the JavaScript editor window, go back to the Map page.
2. Open Events view > select Map screen (Load event is set by default) > select Run Javascript action to the event.
3. We need to add only one line of code:

initialize();

4. Click Add event button

Defining JavaScript for the button

Next, select the button, click Edit event. (Remember, we left the coding blank for this when we created it.) Now, it’s time to insert these lines in it:

var sourceAddress = Tiggr("inputSource").val();
var destinationAddress = Tiggr("inputDestination").val();
var map = Tiggr("directionsMap").gmap;
displayDirections(sourceAddress, destinationAddress, map);

In the first two lines, we get the values from the inputs into variables (as explained in more detail in this article). Then, we get the Google map reference by accessing the gmap property of the map component and feed all this to displayDirections method that we’ve defined earlier.

Testing

Now we are ready to test the app in browser. Let’s see the route to London from…let it be Paris.

It works. The picture looks good, but how much time should you estimate for this journey? And, most of all, I’d like to know how to cross the Channel.

Adding a text directions panel

Fortunately, the Google Maps API provides the capability to show text information about directions in a separate panel, just like in the Google Maps web interface.

In the screen design, let’s add a panel to display actual directions information.

1. Select the mobilescreen, uncheck Show Header
2. Drag and drop a 2-column grid component onto the screen at the top
3. Drag the map into the left column, resize it
4. Drag and drop a panel component into the right column. Set the panel’s name to directionsPanel.

Updating directions JavaScript resource

Now we just need to make some changes to the JavaScript. Open the directions we’ve created. We’ll make two changes. First, we’ll add panel as another parameter for the displayDirections method. Then, we’ll add the following lines:

if (panel != null) {
	directionsDisplay.setPanel(panel);
}

after this existing line:

directionsService.route(request, function(response, status) {

The entire code will be this:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
	directionsDisplay = new google.maps.DirectionsRenderer();
}
function displayDirections(sourceAddress, destinationAddress, map, panel) {
	var request = {
        origin: sourceAddress,
        destination: destinationAddress,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
	if (panel != null) {
		directionsDisplay.setPanel(panel);
	}
	directionsDisplay.setMap(map);
      if (status == google.maps.DirectionsStatus.OK) {
	    directionsDisplay.setDirections(response);
      } else {
		alert("Directions query unsuccessful. Response status: " + status);
	  }
    });
}

Updating the button’s click handler

We’ll also need to make two changes to the button’s click handler. First, we’ll need to add this line before the displayDirections method call:

var panel = Tiggr("directionsPanel")[0];

Then, we’ll need to add panel as a parameter to displayDirections, so that in the end the handler will look like this:

var sourceAddress = Tiggr("inputSource").val();
var destinationAddress = Tiggr("inputDestination").val();
var map = Tiggr("directionsMap").gmap;
var panel = Tiggr("directionsPanel")[0];
displayDirections(sourceAddress, destinationAddress, map, panel);

Final result

When you test the app again, you can now see the panel with text directions: