Landmark Map App
Create a Landmark Map with Google Sheets API
In this tutorial, we will create an app that displays landmarks in Tokyo on a map, using data entered in a Google Spreadsheet via the Google Sheets API. The app supports simultaneous access from multiple smartphones, and any changes made to the data in the spreadsheet will be reflected on the map.
You can download the source code from the download section at the bottom of the page.
Since this app only performs read operations, there is no need to create a service account in advance by following this page. However, you will need the Spreadsheet ID of the Google Spreadsheet you want to read from, so please refer to this section to learn how to obtain the Spreadsheet ID.
From the [Projects] menu, select [Start new project] and name it “LandmarkMap".
See this page for details on the Designer and Blocks Editor.
What You Will Learn in This Tutorial
- Data Integration with Spreadsheets
- Creating Dynamic Markers
- App Development Using Map Components
Components Used
Map, Spreadsheet
Blocks Used
Global Variable, List, for each item in list do, Procedure
Creating a Google Spreadsheet
To display landmarks on a map, you need the name, latitude, and longitude of each location. I asked ChatGPT to generate a CSV file with this data and then imported it into a Google Spreadsheet.
Here is the prompt I entered into ChatGPT. You can try it yourself even with a free account. It might be fun to replace 'Tokyo’ with the name of the place where you live!
I want to create a Google Spreadsheet with the names, latitudes, and longitudes of landmarks in Tokyo, so please generate a CSV file for me.Just upload the downloaded CSV file to Google Drive and open it with Google Sheets. It looks like this. You can view the Google Spreadsheet by clicking the link. The sheet name is 'tokyo_landmarks_en'."
Sharing a Google Spreadsheet
Since this app only reads data from the Google Spreadsheet, you should set the document’s sharing settings to 'Anyone with the link can view’.
Designer
Set the title of Screen1 to “Landmark Map".
From the Maps palette, add a Map component and set its height and width to 'Fill parent’. To make it more user-friendly, set the CenterFromString to '35.681236,139.767125’, which is the latitude and longitude of Tokyo Station.
From the Storage palette, add a Spreadsheet component. Then, obtain the Spreadsheet ID of the sheet you want to use and set it in the 'SpreadsheetID’ property."
- You can get the Spreadsheet ID by following these steps:
- Open your Google Spreadsheet.
- Look at the URL — the string that comes after
docs.google.com/spreadsheets/d/is the Spreadsheet ID. (Example:1A2B3C4D5E6F7G8H) - If you’re not sure how to find it, you can use this one instead: 1jVYBux82WLQFQ97dj4WHcy3KqzSRh1y0TQn26gYrkHA . This is the Spreadsheet ID of a sample sheet.
