Use a Google Spreadsheet hosted on your Google Drive to
update a Map by SteveJG
A developer can provide updated map information onto an OpenStreetMap map tile using an App Inventor Map component
and a shareable Google Sheet on Google Drive.

Skills
What
Use the MIT Map component to create and display run time map markers and simple information about the Marker
locations.Use a shareable Google Spreadsheet to store map information you update. Edit the spreadsheet as necessary
using your computer to provide current information to the app.Use the Web component to download the spreadsheet from Google Drive to your app as a csv file. Convert the csv to a List.
Use the List to populate coordinate and other information for use on the map.
The example app called “Algerian Pharmacies” displays all the pharmacies listed on a spreadsheet formatted as shown
below. The shareable spreadsheet is hosted in Google Drive

The csv that is downloaded from Google Drive looks like:
1,date,latitude,longitude,num tel,adresse,name\n
2,03-09-2019,36.379877,6.469655,213555712784,Ibn ziad,ouafek youcef\n
3,08-09-2019,36.392043,6.480409,,Ibn ziad,khaznada leila\n
4,02-09-2019,36.448638,6.640592,,didouche mourad,guerguit\n
5,30-09-2019,36.447781,6.64539,21331906336,didouche mourad,merouche said
Notice, the pharmacy name is in the 7th element. The second element contains the dates the named pharmacies are open late.
Pharmacies open late on specific dates display on the Map in green. All the other pharmacies listed on the spreadsheet display in red.
Pressing a pharmacy icon can be used to phone the pharmacy represented by the icon. There are two ways this can be done
using the Phone component. Allow the user to phone the late night pharmacy (or any pharmacy) depending whether the app is
compiled using the GooglePlay downloaded Companion or the u Companion downloaded from the Designer. The Block image uses
disabled blocks to show where you can enable the Phone code, depending on what you want to happen.

Custom Map Markers are displayed for the pharmacy locations instead of the colored map pins. The app has the option to change
the color of custom markers that are svg images. A svg image is provided. Ordinary pharmacies display as red icons, pharmacies
open late display as green backed icons (provided that there is a pharmacy in the list that is open on today's date and indicated
in the AlgerianPharmacyLate Google Spreadsheet.)

A bug in App Inventor nb180 and Companion 2.55 or 2.55u causes an issue when creating an apk. MIT is working on fixing the
bug. Until MIT fixes this, the developer must provide a Design Time Map Marker on the Designer and set the
design time Marker's Visible property to false. The invisible marker is needed to allow the Design Time Markers to function
when the app is compiled.

A Companion live development app will work fine without placing the invisible Design Time marker. The compiled app will
display an error if the 'invisible' design time marker is not present.
What you see is what you get
The app example you create is an advanced mini-tutorial. The 'tutorial' assumes the developer has at least intermediate App
Inventor skills and can follow the logic in the Blocks provided.
All the Blocks used are shown above. The createAndPopulateMapMarkers Procedure and the when any Marker.Click event handler contain the critical code Blocks.
The when any Marker.Click block is found in the Any component drawer. The Procedure and the event handler contain the code
that identifies which pharmacies are open (on today's date) if one of the dates stored in column B (see below) corresponds
to today's date.
How to build this app
Create a shareable Google Spreadsheet. Here is an image of the spreadsheet I created (AlgerianPharmacyLate) based on input from a developer.

The columns MUST contain the data as shown in the example spreadsheet in the order of the fields shown. The spreadsheet must be compatible
with the List indexes used to filter the data within the app. For example, column B (also labeled 2 in red where the red value
is the List index for the dates a pharmacy is open late at night) is the date. I do not provide a link to my Google Drive.
You MUST provide a link to a spreadsheet you create. Hard code your spreadsheet Id into the initialize global SpreadsheetID
to block. (also see the Edit below) Insert the ID part of the link as shown in the example here....

If you do not provide a spreadsheet ID, the example app defaults to a hard coded csv (assigned to the dummyCSV variable). Code
is provided so you can test this and if you do not provide a link to a shareable spreadsheet, the app will load the dummyCSV

in place of spreadsheet data. The full contents of the Text Block is:
1,date,latitude,longitude,num tel,adresse,name\n
2,03-09-2019,36.379877,6.469655,213555712784,Ibn ziad,ouafek youcef\n
3,08-09-2019,36.392043,6.480409,,Ibn ziad,khaznada leila\n
4,02-09-2019,36.448638,6.640592,,didouche mourad,guerguit\n
5,30-09-2019,36.447781,6.64539,21331906336,didouche mourad,merouche said contained in

The dummyCSV data will load in the 'else' statement automatically if the spreadsheet ID is not set (Text box left empty). To use the latest spreadsheet data,
you must create and share a spreadsheet with the updated information.
Edit 3 Nov. 2019:================================
Some developers may also need to change the SpreadsheetSheetGID block (which is now 0) to the GID of their spreadsheet. The GID on the spreadsheet below is gid=519553060
shown in the example. The GID of my spreadsheet example is 0 . That information must also be included in addition to the link identification. If the gid is not 519553060
for your link, use what ever value is shown for gid= on your spreadsheet.


======================================================
A Web component loads the spreadsheet data as a csv file when the app is run. The code that loads the spreadsheet data is in the
Screen1.Initialize event handler. You as a developer must provide the spreadsheet on your Google Drive. You must enter the shareable link in the
code. The csv file is converted into a List so the data can be manipulated by the app.
Update the spreadsheet (update it using your computer) to change open dates or add additional locations.
The users of your app will have access to updated information.
A shareable Google Spreadsheet provides the csv used to create the List used to post information on the map. You do
not have to use a Google Sheet; the required csv file can be imported from a CloudDB or FirebaseDB instead. In those
cases, update the csv on those databases using an App Inventor app to modify the stored csv. How to use a database other
than a Google spreadsheet is not explained.
...but I don't want to update pharmacies
Adapt the code to do what you want it to do. You do not have to update late night pharmacies. You are the developer. Use the
spreadsheet to update locations, add locations etc.
Issues
Some Buttons coded are disabled/not visible in the 'finished' app. These Buttons were part of the process I used to test
the app to see what works. Button3 is enabled; all other buttons are enabled but set to Visible = false. I left the code in
the invisible Buttons intact. The code might be useful for developers to help understand some of the processes involved in developing
a complex app such as this one.
The example app has some error control in the code Blocks. You may need to adapt the app to your environment and add additional error
trapping routines.
Before compiling the apk, add a Design Time Marker and set it's Visible property to false.
“None of the pharmacy icons appear green.” That happens when today's date does not correspond to one of the
date entries on the spreadsheet. To get a different behavior or want to provide a list of pharmacies and the dates
they are open, you can do that. Code a Label to 'print' that information if you need that feature. What you build
using this tutorial will be your app.
If you compile your version of the app using a Companion with a 'u' suffix, you will not be able to distribute the
app using Google Play; use a Companion without a suffix. The Companion 'u' is needed to make 'automatic' phone calls.
You must provide a shareable link to a spreadsheet. Make sure your spreadsheet columns mimic the spreadsheet I used to
create the app.
Aia File
Use the AlgerianPharmacies.aia to capture the required Blocks. Load the example Project. You, however, must provide the
spreadsheet and link and enter the link into the existing code as indicated above. If you do not provide a link the aia
will load a 'dummy' csv. It will not load the required csv using the Web component.
Finally
Please do not take this app aia and publish it as your own. Use the techniques demonstrated in the example code to develop
your own map app.
Thank you.
Regards,
Steve