About News & Stories

Create
apps!
Resources

Anyone Can Build Apps That Impact the World Custom Search

(http://www.weibo.com/mitappinventor) (http://mp.weixin.qq.com/s?

__biz=MzAxODE1NTc1MQ==&mid=201968203&idx=1&sn=01f8946b01a98b63e97e201a812dc844#rd)

Map It: Displaying Locations on a Google Map

This tutorial shows how you can develop an app that allows you to record list of addresses and view the address on the Google Maps. It will also
show you how view your current location on the Google Map. This tutorial assumes you have completed the basic tutorials of App Inventor. For
basic and intermediate tutorials, click here (http://appinventor.mit.edu/explore/ai2/tutorials.html) .

Introduction

This tutorial introduces:

List manipulation creating lists, appending items to lists

ListPicker adding items to lists, saving list data
LocationSensor detecting current location for displaying on Google Maps
ActivityStarter used to start-up Google Maps for current or predefined address
Notifier displaying messages
TinyDB saving data into a persistent database
Misc. text manipulation, basic validation

We will be working toward the design shown in figure blow:

The figure below shows how the components are arranged in the
design editor. It also shows you the non-visible components (e.g.
TinyDb, ActivityStarter, LocationSensor, Notifier) that are used in
the app.

Blocks

We define 2 global variables.

tagAddress a variable that is a constant and will be used, as

a tag, for storing and retrieving data from our database.
listLocations a variable that can be used to store and
manipulate list of addresses.

We now create a procedure that can be invoked when the app is

started (initialized). The procedure sets up the initial state of some
of the components. Some of these settings could have been done
from the design editor, but for demo purpose and clarification, we
are using a procedure. In the procedure, we also check our
database to find out if there are any stored addresses. If no data,
then we just use an empty list.

Adding a New Addresses

We use AddLocationButton to add a new address, CancelButton to cancel the process of adding, and LocationHelpButton to display what type of
addresses can be entered. The blocks to make these actions work are here:

When AddLocationButton is clicked, we make our address data entry visible (using screen arrangement), allowing user to enter address. If user
clicks on Cancel, we make the arrangement hidden again. Using this approach, we keep the screen simple and avoid the clutter. We also provide
the SubmitButton to allow the user to indicate that they want to store data.

When the user clicks on SubmitButton, we perform basic validation to ensure data has been submitted. If validation does not pass, we display an
error message. Otherwise, we invoke a procedure that appends the new address to our list. We also store the updated list into our database. Once
address is added, we hide our arrangement again. The blocks below show how this logic is done:

Selecting an Addresses

When the user clicks on ListPicker1 Select Location and selects an address, this action calls the blocks below:

This displays the address in the device and allow the user to tap on ViewOnMapButton to see the blocks selected address on the Google Map
see the figure below:

When ViewOnMapButton is clicked, we validate to ensure that an address already has been selected. If not, an error message is displayed.
Otherwise, we use blocks below to show address:

The above blocks will open the map and the output will be like image below:

Viewing Current Location On the Map

We have dropped in a button, MyLocationButton My location On the Map that can be clicked to view one's current location. It will use
 Download Source Code

If you'd like to work with this sample

in App Inventor, download the
source code to your computer, then
open App Inventor, click Projects,
choose Import project (.aia) from
my computer..., and select the
source code you just downloaded.

MIT App Inventor expresses its

gratitude to M. Hossein Amerkashi
for developing this tutorial. Visit
Hossein's blog
(http://amerkashi.wordpress.com/2014/02/27/how-
to-develop-location-based-
android-app/) to find out
more about him and his App
Inventor support materials.

Tutorial Version: App

Inventor 2

Tutorial Difficulty: Advanced

Tutorial Type: ListPicker Data Storage Activity Starter External API Location Sensor GPS
Tweet Share 39 Share 22

Home About News & Stories Resources

About Us In The News Get Started
Our Team Stories Teach
Sponsors Team Blog Documentation
App of the Month Tutorials
AI Classic
Resources
Forums
Troubleshooting

(http://creativecommons.org/licenses/by-sa/3.0/)
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
(http://creativecommons.org/licenses/by-sa/3.0/)

2012-2015 Massachusetts Institute of Technology (http://web.mit.edu/)

Contact Us