Paris Map Tour | mit app inventor App

In this post, you'll construct a new app inventor app that allows you to make your own custom aide for a fantasy outing to Paris. 

What's more, since a couple of your companions can't go along with you, we'll make a buddy application that allows them to take a virtual visit through Paris also. 

Making a completely working guide application may appear to be truly confounded, yet App Inventor allows you to utilize the ActivityStarter part to dispatch Google Maps for each virtual area. 

In the first place, you'll construct an application that dispatches maps for the Eiffel Tower, the Louver, and Notre Dame Cathedral with a solitary snap. 

 

Paris Map Tour mit app inventor App

Then, at that point, you'll alter the application to make a virtual visit through satellite guides that are additionally accessible from Google Maps.

App Objectives

• Use the WebViewer component to display Google Maps within the application.
• Use variables to store some application-specific information.
• Use the ListPicker component to enable users to choose the location of the tour from the list.

App Tools

Tool #1: Image

Palette: User Interface

Name: Image1

Use: Show a static image of a Paris map on the screen.

Tool #2: Label

Palette: User Interface

Name: Label1

Use: Display the text "Discover Paris with your Android".

Tool #3: ListPicker

Palette: User Interface

Name: ListPicker1

Use: Display the list of destination choices.

Tool #4: ActivityStarter

Palette: User Interface

Name: ActivityStarter1

Use: Launch the maps app when a destination is chosen.

Adjust tool properties

Tool: ActivityStarter1

Property	Value
Action	android.intent.action.VIEW
ActivityClass	com.google.android.maps.MapsActivity
ActivityPackage	om.google.android.apps.maps

Steps

1. Start app inventor with a new project.
2. Download the file here metro.jpg metro.jpg to load it into your project. You’ll then need to set it as the Picture property of Image1.
3. The ListPicker component comes with a button; when the user clicks it, the choices are listed. Set the text of that button by changing the Text property of ListPicker1 to "Choose Paris Destination".

The app screen becomes as follows:

Add behaviors to app components

In the Blocks Editor, we'll need to define a list of destinations and two behaviors:

• When the app begins, the app loads the destinations into the ListPicker component so the user can choose one.
• When the user chooses a destination from the ListPicker, the Maps application is launched and shows a map of that destination. In this first version of the app, you'll just open Maps and tell it to run a search for the chosen destination.

Creating a List of Destinations

1. Go to the Blocks screen, set an initialize global to the Blocks area, and name this variable Destinations.
2. Click the Lists category, then drag the make a list into the initialize global to.
3. Click the blue star button inside the list creation block, and add another item (item) inside the list.
4. Click on the text blocks list, then drag and drop empty text blocks at the end of the make a list list, and write the names of the places of tours in these spaces.

so that the block will look like this:

Finding destinations (URLs)

1. Open the browser on your computer and go to the address (http://maps.google.com/).
2. Find the address (Eiffel Tower).
3. Zoom until you reach your destination.
4. Display the scene you want, let it be a street view.
5. Copy the URL for this destination.
6. Repeat the previous steps for the other destinations.

Thus, we get their addresses as follows:

• Tour Eiffel
• Musée du Louvre
• Cathédrale Notre Dame (street view)

Define URLs for the list

In the global configuration variable, we created a list of tourist destinations, and now we have to associate these destinations with their URLs so that if the user chooses a tourist destination, their URL will be known.

To do this, we create a new global config variable with the name (URLs) and add the addresses to it in the same order as the names in the config variable (Destinations), to be as follows:

Letting the User Choose a Destination

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 Screen1.Initialize event.

Opening Maps with a Search

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.

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."

App Blocks

App Preview

1. Choose Al companion command from the Connect menu.
2. Point the phone's camera at the code that will appear on the screen, and press the (Scan QR) code button to run the application on the phone.
3. Choose a destination from the list of items to be navigated to in a web viewer.

App QR

Download the app from google play.

Now How to Publish your Apps to Google Play or App Store with App Inventor