The above blocks will open the map and the output will be like image below: Otherwise, we use blocks below to show address: When ViewOnMapButton is clicked, we validate to ensure that an address already has been selected. 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 the user clicks on ListPicker1 ‘Select Location’ and selects an address, this action calls the blocks below: The blocks below show how this logic is done: Once address is added, we hide our arrangement again. We also store the updated list into our database. Otherwise, we invoke a procedure that appends the new address to our list. If validation does not pass, we display an error message. When the user clicks on SubmitButton, we perform basic validation to ensure data has been submitted. We also provide the SubmitButton to allow the user to indicate that they want to store data. Using this approach, we keep the screen simple and avoid the clutter. If user clicks on Cancel, we make the arrangement hidden again. When AddLocationButton is clicked, we make our address data entry visible (using screen arrangement), allowing user to enter address. The blocks to make these actions work are here: 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. If no data, then we just use an empty list. In the procedure, we also check our database to find out if there are any stored addresses. Some of these settings could have been done from the design editor, but for demo purpose and clarification, we are using a procedure. The procedure sets up the initial state of some of the components. We now create a procedure that can be invoked when the app is started (initialized). listLocations – a variable that can be used to store and manipulate list of addresses.tagAddress – a variable that is a constant and will be used, as a tag, for storing and retrieving data from our database.TinyDb, ActivityStarter, LocationSensor, Notifier) that are used in the app. It also shows you the non-visible components (e.g. The figure below shows how the components are arranged in the design editor. We will be working toward the design shown in figure blow: TinyDB – saving data into a persistent database.ActivityStarter – used to start-up Google Maps for current or predefined address.LocationSensor – detecting current location for displaying on Google Maps.ListPicker – adding items to lists, saving list data.List manipulation – creating lists, appending items to lists.For basic and intermediate tutorials, click here.

This tutorial assumes you have completed the basic tutorials of App Inventor. It will also show you how view your current location on the 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.

Map to pinpoint locations