Activities with Maps
1. Locate a Point on the Map
With the PointLocator App you can:
• Pinpoint an address on a Google map
Components:
• ActivityStarter
• A button
Starting the App:
a. Go to the Designer area and find the components:
Drag an Activity Starter component to the viewer. You will find it in the «Connectivity» block. This is a
non-visible component so it must remain at the bottom of the screen.
1
b. In the Blocks area:
Select «Screen1» and find: «When Screen1.Initialize do».
Add the blocks to the instruction below that will let you run the Google Maps search from your App:
You can find the following blocks by selecting «ActivityStarter1»:
• Set ActivityStarter1.Action to
• Set ActivityStarter1.ActivityPackage to
• Set ActivityStarter1.ActivityClass to
2
c. You will also have to type in the values using the Text box under Built-in:
The values to enter are the ones displayed in the image below:
These values must be positioned in the same order as they appear in the image and respect the
letters in upper and lower case, dots, etc.
These values cannot be changed. They must be respected as written.
If the Google Maps map doesn’t show up when you enable the App it’s because something is wrong
in this point.
d. The next property to add is DataUri, providing Google Maps with the address:
In this case, enter: «Pl Catalunya, Barcelona»
To ensure it understands that it is an address, preface it with: geo:0,0?q=
Then type in the address itself. For example: Pl Catalunya, Barcelona.
When you have configured everything, you must inform ActivityStarter that you are starting up the App:
3
The sequence will look like this:
When you open the App, Google Maps will open directly with the entered address. In this case, let’s
continue with the same example: «Pl Catalunya, Barcelona».
4
2. Pinpoint your location on the map
Components
• ActivityStarter
• Button: to indicate where you are. We will name it WhereIAmButton using Rename and
«Where Am I?» as a visible name
• Location Sensor
Starting the App:
Open the previous App, PointLocator, and save it as LocateWhereIAm. This will give you a new project.
a. Go to the Designer area and add another component: LocationSensor.
b. Select the button you have from the previous App and modify it: name it WhereIAmButton using
Rename and «Where Am I?» as a visible name.
These two components are shown in the following images:
5
c. LocationSensor: add it to the designer area and program it from the blocks area. It must be
configured in such a way that it is enabled when you run the App:
When you have LocationSensor enabled you can use it to build the DataUri. Use the property:
CurrentAddress:
d. To execute the instruction, associate it with the «Where Am I?» button.
Add these instructions to the previous blocks as follows:
6
3. Locate an Address on the Map
Components
• ActivityStarter
• A button
• TextBox
Starting the App:
Open the previous App, PointLocator, and save it as LocateAddress. This will give you a new project.
The purpose of this App is to enter the address you want from a text box and not have to have a fixed address
the whole time.
a. Go to the Designer area and add two more components:
• A text box: you can use this to enter the address you want to find in Google Maps on your App.
• A button: to indicate that the address has been entered and you can execute the instruction
associated with this action. We will call it MapButton using Rename and «Search» as a visible
name.
7
b. Go back to the Blocks area and select the button. Select and drag the When BotoMapa.Click
do sentence.
c. You will need to give it a global variable. The name to give it is «location». You will find it in the
Built-in menu.
Initialize it so you can later give it a value other than nil.
8
d. This requires a previous step. Use the «join» tool in the «Math» menu to combine two data
chains:
• the «geo:0,0?q=» instruction
• the value entered in the textbox
It must look like this:
9
e. Move the instructions from the «When Screen1.Initialize do» block to the «When BotoMapa.
Click do» control block:
• Set ActivityStarter1.DataUri to
• Call .startActivity
f. Change the value you entered in «Set ActivityStarter1.DataUri to».
Go to the Variables block and select get.
When you click the arrow (in get), the variable you created earlier will appear: «location». Select it.
10
The block will be as follows:
The App will look like this:
You can also locate a point if you have its coordinates. To do this, follow the instructions in the
Computational Thinking material in the App Inventor maps section.
11
4. Route Between Two Points
Components
• ActivityStarter
• A button
• Two text boxes (optional)
Open the first App, PointLocator, and save it as DrawRoutes. This will give you a new project.
a. To draw a route on a Google map, DataUri must include the starting location and destination in
https format and separated by the «/» symbol.
12
b. If we enter the addresses:
• Starting location: Barcelona Cathedral
• Destination: Seat of the Catalan Government
The instruction will be:
http://www.google.com/maps/dir/Catedral de Barcelona/Palacio de la Generalitat
The programming space will look like this:
The route you will see on your mobile device will be this:
13
You can also add two text chains, where users can enter their starting location and destination. The
programming space will look like this:
14
