Open the Blocks Editor and create a variable with the list of Paris destinations using the blocks listed in Table 6-3.

The destinations variable will call the make a list function, into which you can plug the text values for the three destinations in your tour, as shown in Figure 6-2.

Figure 6-2. Creating a list is easy in App Inventor

The purpose of the ListPicker component is to display a list of items for the user to choose from. You preload the choices into the ListPicker by setting the property Elements to a list. For this app, you want to set the ListPicker’s Elements property to the destinations list you just created. Because you want to display the list when the app launches, you’ll define this behavior in the Screen1.Initialize event. You’ll need the blocks listed in Table 6-4.

How the blocks work

Screen1.Initialize is triggered when the app begins. As shown in Figure 6-3, the event handler sets the Elements property of ListPicker so that the three destinations will appear.

Figure 6-3. Put anything you want to happen when the app starts in a Screen1.Initialize event handler

Test your app.

First, you’ll need to restart the app by clicking “Connect to Device. . .” in the Blocks Editor. Then, on the phone, click the button labeled “Choose Paris Destination.” The list picker should appear with the three items.

Next, you’ll program the app so that when the user chooses one of the destinations, the ActivityStarter launches Google Maps and searches for the selected location.

When the user chooses an item from the ListPicker component, the ListPicker.AfterPicking event is triggered. In the event handler for AfterPicking, you need to set the DataUri of the ActivityStarter component so it knows which map to open, and then you need to launch Google Maps using ActivityStarter.StartActivity. The blocks for this functionality are listed in Table 6-5.

How the blocks work

When the user chooses from the ListPicker, the chosen item is stored in ListPicker.Selection and the AfterPicking event is triggered. As shown in Figure 6-4, the DataUri property is set to a text object that combines “http://maps.google.com/?q=” with the chosen item. So, if the user chose the first item, “Tour Eiffel,” the DataUri would be set to “http://maps.google.com/?q=Tour Eiffel.”

Figure 6-4. Setting the DataURI to launch the selected map

Since you already set the other properties of the ActivityStarter so that it knows to open Maps, the ActivityStarter1.StartActivity block launches the Maps app and invokes the search proscribed by the DataUri.

Test your app.

Restart the app and click the “Choose Paris Destination” button again. When you choose one of the destinations, does a map of that destination appear? Google Maps should also provide a back button to return you to your app to choose again—does that work? (You may have to click the back button a couple of times.)

The first step is to open Google Maps on your computer to find the specific maps you want to launch for each destination:

Using this scheme, Table 6-6 shows the URLs you’ll use.

To view any of these maps, paste the URLs from Table 6-6 into a browser. The first two are zoomed-in satellite views, while the third is a street view.

You can use these URLs directly to launch the maps you want, or you can define cleaner URLs using the Google Maps protocols outlined at http://mapki.com. For example, you can show the Eiffel Tower map using only the GPS coordinates found in the long URL in Table 6-6 and the Maps geo: protocol:

geo:48.857942,2.294748?t=h&z=19

Using such a DataUri, you’ll get essentially the same map as the map based on the full URL from which the GPS coordinates were extracted. The t=h specifies that Maps should show a hybrid map with both satellite and address views, and the z=19 specifies the zoom level. If you’re interested in the details of setting parameters for various types of maps, check out the documentation at http://mapki.com.

To get comfortable using both types of URLs, we’ll use the geo: format for the first two DataUri settings in our list, and the full URL for the third.

You’ll need a list named dataURIs, containing one DataURI for each map you want to show. Create this list as shown in Figure 6-5 so that the items correspond to the items in the destinations list (i.e., the first dataURI should correspond to the first destination, the Eiffel Tower).

Figure 6-5. The list of maps for your virtual tour

The first two items shown are DataURIs for the Eiffel Tower and the Louvre. They both use the geo: protocol. The third DataURI is not shown completely because the block is too long for this page; you should copy this URL from the entry for “Notre Dame, Street View” in Table 6-6 and place it in a text block.

In the first version of this app, the ListPicker.AfterPicking behavior set the DataUri to the concatenation (or combination) of “http://maps.google.com/?q=” and the destination the user chose from the list (e.g., Tour Eiffel). In this second version, the AfterPicking behavior must be more sophisticated, because the user is choosing from one list (destinations), but the DataUri must be selected from another list (dataURIs). Specifically, when the user chooses an item from the ListPicker, you need to know the index of his choice so you can use it to select the correct DataUri from the dataURIs list. We’ll explain more about what an index is in a moment, but it helps to set up the blocks first to better illustrate the concept. There are quite a few blocks required for this functionality, all of which are listed in Table 6-7.

How the blocks work

When the user chooses an item from the ListPicker, the AfterPicking event is triggered, as shown in Figure 6-6. The chosen item—e.g., “Tour Eiffel”—is in ListPicker.Selection. The event handler uses this to find the position of the selected item, or the index value, in the destinations list. The index corresponds to the position of the chosen destination in the list. So if “Tour Eiffel” is chosen, the index will be 1; if “Musée du Louvre” is chosen, it will be 2; and if “Cathédrale Notre Dame de Paris” is chosen, the index will be 3.

Figure 6-6. Choosing a list item based on the user’s selection

The index can then be used to select an item from another list—in this case, dataURIs—and to set that entry as the ActivityStarter’s DataUri. Once this is set, the map can be launched with ActivityStarter.StartActivity.

Test your app.

On the phone, click the button labeled “Choose Paris Destination.” The list should appear with the three items. Choose one of the items and see which map appears.