Hello friends, and welcome to Obsidian Soft
In today’s tutorial, I will teach you how to use the maps component in MIT App Inventor. We will build a place finder app.
So, let’s begin:
Open up MIT App Inventor and start a new project. Name it placeFinderApp and keep the toolkit default. This is very important. For screen 1, make align horizontal center, align vertical center, and set the screen orientation to portrait.
Drag and drop a ListPicker from the User Interface palette onto the viewer. Make background color orange, font bold, font size 18, and change text to “Choose Place”. In elements from string, type in hospital, restaurant, atm, school. You can add other amenities too, but be careful with the spellings. Check out the following link for the list of amenities. https://wiki.openstreetmap.org/wiki/Category:Amenities
Now, add a Map component from the Maps palette. Make height 75% and width fill parent.
Add a Location sensor from the Sensors palette.
Add Web and Activity Starter from the Connectivity palette and a Notifier from the User Interface palette.
Our screen design is done, so let’s go to the blocks section.
We need a few global variables:
First, we will work on putting a green marker at our home location.
Make an empty procedure called goToHome.
Next, get the LocationChanged event of the location sensor. Check if the map doesn’t already have markers, as this means the home was already set. If the list of markers is empty, then set global variables for home latitude and longitude to the latitude and longitude detected by the location sensor, and then call goToHome procedure.
Now, let’s work on the goToHome procedure. First, we center themap around our home’s latitude and longitude. Then, we empty our markers list. This goToHome will be called at two points: when our location is determined for the first time, and when we choose some other amenity in the places list picker.
Then, we create our homeMarker at our location’s latitude and longitude. We set the homeMarker’s properties, such as title and color, and also enable the info box. This means that the title will show when the user taps on a marker.
Next, we will add this homeMarker to our list of markers.
When the user chooses an amenity or place, the list picker’s AfterPicking event is triggered.First, we check if the location sensor’s latitude isn’t 0. This means that the user hasn’t turned on their location. So, use the notifier to show a relevant message in the else. In If, set the web component’s URL to a call to the Overpass API, which is a way of accessing OpenStreetMap data.
So, the URL is a join of 7 things.
- https://overpass-api.de/api/interpreter?data=[out:json];node[amenity=
- ListPicker.selection
- ](around:2000,
- LocationSensor.Latitude
- ,
- LocationSensor.Longitude
- );out;
Copy and paste the text parts very carefully.
Then, call web1. Get. Verify the blocks in ListPicker.AfterPicking event super carefully as a small spelling mistake can lead to the API call failing. Your block structure should look like the following:
The call to Web1.Get will trigger Web1.GotText event.
The responseContent looks like this when we call the Overpass API. So, we need to decode it.
{
“version”: 0.6,
“generator”: “Overpass API 0.7.62.5 1bd436f1”,
“osm3s”: {
“timestamp_osm_base”: “2025-05-19T08:50:42Z”,
“copyright”: “The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.”
},
“elements”: [
{
“type”: “node”,
“id”: 458106054,
“lat”: 41.8098280,
“lon”: -87.9657834,
“tags”: {
“amenity”: “restaurant”,
“name”: “ZaZa’s”
}
},
{
“type”: “node”,
“id”: 4619166089,
“lat”: 41.7786793,
“lon”: -87.9756891,
“tags”: {
“amenity”: “restaurant”,
“cuisine”: “mexican”,
“name”: “Marmelly”
}
},
And we need the list of places inside this responseDict against the key: “elements”. Spelling is very important when getting data from dictionaries. We will put all places inside a local list of placesData.
Next, we are going to reset our global places names and map’s features. This is to remove existing markers from the map. We also call the goHome procedure, as we want to get the map back to the original state with a green marker for our home.
Now comes the main part of creating markers on our map. We go through each item in our placesData, the local list containing all the places. We make a local variable name for containing the name of our place, which is basically inside our dictionary against the key “tags” and within this dictionary, a value against the key “name”. We add the local variable name to our placesNames list. Then, we get the latitude and longitude. Create a marker at that point. Set its properties. And then, add the marker to the markers list. Outside the for loop, we set the map’s features to this markers list.
Since we have so many markers, here, any component blocks are super helpful in coding. We get the any Marker click event. We check that the marker’s title isn’t Home. And then, we store this marker in the global clickedMarker variable. And we show a dialog user Notifier’s ShowChooseDialog asking whether the user wants to open Google Maps to show directions.
When the user chooses something on the dialog: yes or no button, Notifier’s After Choosing event is triggered. If their choice is yes, we will open up Google Maps using the activity starter; otherwise, we will dismiss the dialog.
The way to set the activity starter is as follows:
Action = android.intent.action.VIEW
DataUri is a join of
- https://www.google.com/maps/search/?api=1&query=
- The clicked marker’s latitude
- ,
- The clicked marker’s longitude
So, our app is done, in which we have marked our own location. We can look at different types of amenities within 2 km of our own location. I hoped you liked this tutorial.
You can also have a look at the video tutorial here:
Please like my videos and share it with your friends and family. Also, subscribe to my channel and press the bell icon so you don’t miss any of the great projects I have planned for you.
https://www.youtube.com/c/obsidiansofteducation
Please like my Facebook page and Instagram page for more educational resources and tips.
Facebook: https://www.facebook.com/ObsidianSoft/
Instagram: https://www.instagram.com/obsidiansoftapps/
Pinterest: https://www.pinterest.com/obsidiansoft/
For links to free educational apps, have a look at the educational apps page