Chapter 3.8 - Map Tour Tutorial

Time Estimate: 45 minutes

3.8.1. Introduction and Goals

The Map Tour allows a user to select a location from a list, and it then launches the device’s Google Maps webpage to show the selected location on the map. The app uses what’s known as the Google Maps Application Programming Interface (API) to enable the app to provide various forms of help and assistance such as: Finding a location on a map. Getting directions (driving or walking) to a destination. Finding restaurants or other places of interest on a map. Thus, by learning to use the maps API this lesson opens up a whole new view of the Internet that is only available to programmers. Objectives: In this lesson, you will create an app that: uses the Google Maps API to perform different map-related functions; uses a List to store and access data; randomly selects items from a list;

Getting Ready

To get started, open a new project in Thunkable. Then follow along with the following tutorial.

The Map Tour UI

The UI for the Map Tour app is very simple. It contains a Web Viewer, a Simple List Component, three buttons, and a Location Sensor. The Web Viewer is used to display a map of San Francisco from Google Maps. The Simple List Component is used to let the user choose a location that they would like to visit. Once the user chooses a destination, the Web Viewer opens the Google Maps webpage and displays that location on a map.

Adding a Web Viewer Component

Drag and drop a Web Viewer component from the Palette’s User Interface category to the Viewer. Change the URL property to https://www.google.com/maps.

Adding a Simple List Component Component

The Simple List Component can be used to select an option from a list of choices. The Simple List Component will be hidden and will appear when a button is clicked to display a list of options for the user to choose from. The list can be a list of text or a list of numbers.

1. Drag and drop a Simple List Component from the Palette’s User Interface category to the Viewer.

2. Set the Simple List Component’s Visible property to false.

To learn more about the Simple List Component, read about the Simple List Component in the Thunkable docs.

Adding a Location Sensor

The Location Sensor block can be used to detect the user’s location.In the Blocks view, add a Location Sensor block from the App Feature’s Sensors category.

Coding the App’s Behavior

We will use the Simple List Component and the Web Viewer to open Google Maps and view a desired location on the map. To do this, we will create a list of locations that the user can choose from.

About Lists

The simplest data abstraction in programming is a variable, but there are more complex data structures available in all programming languages. Thunkable has a data structure called list that allows the storage of multiple items under one name in memory. The items are indexed which means they are numbered from 1 to the length of the list. To define a list, we can create a global variable that can be initialized to an empty list (a list with no items in it):

Or we can assign the variable a specific list of items using make a list:

The Lists drawer contains lots of blocks (List blocks) such as in list insert at and random item of list that let you manipulate the items in the list.

AP Pseudocode

In the AP CSP pseudocode, lists are represented using square brackets [ ], as shown below. The assignment operator ← (the left-pointing arrow) can be used to assign a list to a variable. So, the initialization of the global destinations variable in Thunkable would look like this in the AP pseudocode:

destinations ← [ "Golden Gate Bridge", “Pier 39", “San Francisco State University”]

List items can be numbers or text, or other lists. Text items are also called strings, which are usually indicated by quotes "" to distinguish them from variables.

Creating a List of Destinations

Begin by creating a list of places that you might want to visit while in your vicinity.

1. Initialize a list variable called destinations by using an initialize app variable block from the Variables drawer and a list block from the Lists drawer in the Toolbox.

2. Use text blocks to add items to the list. If you need more items, remember you can use the mutator (the blue widget) to open up more items on the list. In our example, we are using San Francisco locations:

Setting the Simple List Component’s Elements

Now that you have a list of destinations, you’ll want to display this list to the user. Here is where you should make use of the Simple List Component. When the screen starts, set the Simple List Component’s text items to be the list variable destinations. This will make each item in destinations a choice in the Simple List Component. Your code should look like this:

You will also need to set the Simple List Component’s visibility to true when you click the Choose Destinations Button:

Opening the Google Maps Webpage in the Web Viewer

So far, you have created a list of possible destinations and then displayed that list in the Simple List Component. When the user selects one of the destinations in the Simple List Component, the app should open the selected location in Google Maps. To do so, we use the when Simple List Component Item Click event handler.

When you’re done coding the Item Click handler, it should look like this:

Here are the steps:

1. Get a when List_Viewer1 Item Click event handler from the List_Viewer1 drawer in the Toolbox.

2. Get a setter block from the ButtonDestinations drawer in the Toolbox and set the Text to the item from the event handler.

3. Get a setter block from the Web_Viewer1 drawer in the Toolbox to set the URL.

4. Get a join text block from the Text drawer in the Toolbox.

5. Get an empty string text block from the Text drawer and type. https://www.google.com/maps/search/?api=1&query= (You may copy and paste this text.) This is the code that is used for the Google Maps URL API.

6. Get a in text replace all block from the Text drawer. Insert the item from the event handler as the first text parameter, a space for the second parameter, and a + for the third parameter. This block will replace the spaces in item with a + so that the search query is URL-escaped.

7. Get a setter block from the List_Viewer1 drawer and change the Visible property to false to hide the Simple List Component afterwards.

For example, if the user selected “Golden Gate Bridge”, this code will concatenate https://www.google.com/maps/search/?api=1&query=Golden+Gate+Bridge, which tells Google Maps to display a pin at the Golden Gate Bridge on a Google map. The result will be the map shown in the image above.

Run and Test the App

You’re ready to test your app on your device (phone or tablet). Note that this may not work on a laptop/desktop web browser in preview mode, so you will need to test this on your phone with the Thunkable Live app. As you select destinations from the Simple List Component, the app should display a map with a pin at the selected location.

What’s Happening Here: When the user selects a destination, the app accesses the Google Maps webpage on the device.

If Google Maps can’t find a location, it will display a map but will not place a pin at the selected location. Check the spelling of your destination and make sure it’s a real destination in your vicinity. Also, make sure you are replacing spaces with a +.

Picking a Random Destination

Because we have stored our destinations in a list, Thunkable has a block that makes it easy to select a random destination from the list. Just use the random item of list block in the List drawer to select a random item from the destinations list:

Let’s add a button to the UI that will bring the user to one of the random destinations on the list. We’ll name the button ButtonSurpriseMe, and when it is clicked, it should set ButtonDestinations text to a random destination from the list and set the URL for the Web Viewer:

Asking Google Maps for Directions

As we noted above, this app is making use of the Google Maps Application Programming Interface (API). An API is a set of software tools that programmers use in building applications, such as you are doing. Learning how to use an API lets you take advantage of software that other programmers have created to do some pretty cool things.

For example, the Google Maps API lets you ask for directions. Here is the first part of the URL: https://www.google.com/maps/dir/?api=1&destination=

In that case, the URL that you have to provide looks like this, where the location variable is storing a location such as “Pier 39”.

By default, Google Maps will provide navigation instructions to the specified destination starting from your current location -- assuming your device has GPS.

Let’s add a ButtonDirections button to the app and code it to tell Google Maps to provide directions to a previously selected destination. Code the ButtonDirections Click handler as shown here:

This will provide directions to the destination that was last selected with the Simple List Component.

Enhancement Mini Project

Create another button that uses one of the other commands that come with the Google Maps API. Among other things, you can control the type of directions (by foot or car or bicycle), the type of map (street view, satellite view, hybrid), and many other things. Here’s a link to the API documentation and here are some example URLs to try:

Find restaurants in the vicinity	https://www.google.com/maps/search/?api=1&query=restaurants
Find directions by transit to Galileo	https://www.google.com/maps/dir/?api=1&travelmode=transit&destination=Galileo+Academy+of+Science+and+Technology
Display street view of Galileo	https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=37.803483, -122.424057

Still Curious? APIs Extend Your Powers as a Programmer

In this app, you made use (through Web Viewer) of Google Maps, an existing web API. You used the Google Maps Application Programming Interface (API) to control the maps that were displayed in your app. The Google Maps API provides documentation for programmers and app developers on how to interact with its application. There are lots of APIs available to programmers. Their role is to specify exactly how programs and apps can interact with each other to perform certain tasks, like sending email or Twitter messages or displaying a map. The API specifies exactly what information you need to provide and in what specific format to provide it in order to interact with an existing application.

One interesting implication of this lesson is that APIs enable programmers to see the Internet and Web and their mobile devices in a very different way than other users. Rather than seeing it merely as something to use, APIs allow programmers to control how they interact with their mobile devices and with applications provided by Google, Amazon, Twitter, and others.

3.8.3. Summary

In this lesson, you learned how to:

Learning Objective AAP-1.A: Represent a value with a variable.

Learning Objective AAP-1.C: Represent a list or string using a variable.

Learning Objective AAP-1.D.a: For data abstraction: a. Develop data abstraction using lists to store multiple elements.

Learning Objective AAP-1.D.b: For data abstraction: b. Explain how the use of data abstraction manages complexity in program code.

Learning Objective AAP-2.D: Evaluate expressions that manipulate strings.

Learning Objective AAP-2.N.a: For list operations: a. Write expressions that use list indexing and list procedures.

Learning Objective AAP-2.N.b: For list operations: b. Evaluate expressions that use list indexing and list procedures.

Learning Objective AAP-3.D: Select appropriate libraries or existing code segments to use in creating new programs.

3.8.4. Self-Check

Vocabulary

Here is a table of the technical terms introduced in this lesson. Hover over the terms to review the definitions.

list index string concatenation substring	data type data abstraction Abstract Data Type (ADT) API GPS

Check Your Understanding

Complete the following self-check exercises.

Q-1: In order for this block to work, the global destinations variable must be what type of data (number, string, list, etc.)? Type your answer into the text box. Spelling counts.

Q-2: Lists have a length property that keeps track of how many items or elements are in a given list. What is the length of this list? Type your answer into the text box.

Q-3: Lists are indexed, or numbered, starting with 1, which means that you can retrieve any item from a list by giving its index. For the list below, what is the index of “No way”? Type your answer into the text box.

Q-4: What do you suppose would happen if your app asked MIT App Inventor for the item at index 10 in the list shown here?

A. It would give you the first item in the list.

B. It would give you a random item from the list.

C. It would give you the last item in the list.

D. It would ignore your request.

E. It would crash because there is no item with that index.

3.8.5. Reflection: For Your Portfolio

Answer the following portfolio reflection questions as directed by your instructor. Questions are also available in this Google Doc where you may use File > Make a Copy to make your own editable copy.