Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



84 Commits

Repository files navigation

How To Create Your Own Geo-Locator App

Image of 1 A geo-locator app can be used to search for and filter through programs and services in your area. Click the video to watch a presentation explaining what a geo-locator app does and why it can be useful. This repository was created to help you create your own version of Suffolk LIT Lab's geo-locator website application, which can be found here. Here are the steps to create your own geo-locator website application:

1. Head to and create your own account.

2. Once you've created an account, go to

3. Click on the index.html file.

4. Click the pen button to edit the code. You will have to verify your GitHub account via email before editing anything.

Image of pen

5. Copy the all the code from index.html. This is blank template where you will insert all the data needed.

6. Click fork on the top right hand corner.

Image of 1

7. Choose your profile to save under. Click the index.html file. Click the pen button to edit the code.

8. In the index.html file, paste the copied code.

9. Commit the changes on the bottom of the page.

Image of Commit

10. Go to settings. Scroll down to GitHub Pages and turn on master branch.

Image of Settings Image of Settings2

11. Change the name to what you would like as this is how it will show up in the URL. Go back to the repository by clicking where the arrow is pointed.

Image of Repo

12. Go to a different tab/window. Create an Airtable account here. Airtable will be free since this app will likely not be used for commerical purposes.

Image of Airtable sign in

13. Choose a base template that suits your needs.

Image of Templates

14. Add tabs for all the different locations desired (i.e. Boston, Roxbury etc...) and add a "locations" tab.

Image of Locations

15. Under the "locations" tab, include the name, latitude & longitude coordinates, and zoom for each location. To find the latitude & longitude, you can use this website. To add the zoom, add a comma then a number (i.e. ,13 ,14 ,15) to the end of coordinates.

Image of Locations tab

16. Use the following headings for the different sections on the Airtable: Name, Category, Minimum age, Maximum age, Address, Description, Wesbite, Phone, Email, Valid As Of, Latitude, and Longitude.

Image of Airtable

17. Under the Category heading, create your own set of categories (i.e. community outreach, job opportunities/training, health services etc...).

18. Conduct research on the programs you want to include. Begin inputting your own data into the Airtable.

19. Turn to the index.html file. Click the pen button to edit. Update lines 7 & 34 to create your own title.

Image of 7 34

20. Update line 38 to include your own description (i.e. "Use the following selections to find juvenile social, community based programs & services in and around Boston").

Image of 38

21. Update line 46 to describe age filter.

Image of 46

22. Now turn to line 73 to update your own About page.

Image of 73

23. Update line 142 to input your own Category names. Make sure the Category names are spelled exactly as they are in the Airtable to ensure the data is inputted correctly into the code. Tag the categories as you want to refer to them throughout the code (i.e. "Alternative" "Risk").

Image of 142

24. Put the tagged names into line 208 (i.e: checkbox-v-Alternative').

Image of 208

25. Go back to your Airtable. Find your API key. You can follow the steps below or go to this website. Go to your profile, click "Account." Scroll down to find your unique API key.

Image to Account

Image to Account 2

Image to API Key

26. Copy and paste your API key in line 141 of the code. Make sure "key" is not entered into the code twice.

Image of 141

27. Find your API documentation. You can follow the steps below or go to this website. Click the question mark then go to "API Documentation." Look to the URL at the top of page and copy everything after the "app."

Image of API Documenation

Image of API Documentation 2

Image of API Documentation 3

28. Copy and paste your API documentation in line 140 of the code. Be sure to only have "app" in the code once.

Image of 140

29. Find your Google Maps API. To find your Google Maps API go here and follow the steps below. You will have to sign into Google using a gmail account. Once you're signed in, click "Get Started"

Image Line Google API 1

30. Choose the Maps selection. Click "Continue."

Image Line Google API 1.2

31. Click "My Project" or create a new one.

Image Line Google API 1.3

32. Google will then ask you to enable billing. Even though you must input a credit card, Google gives $200 a month of free use. It is more likely than not that you will still not reach the $200 threshold because the app will likely be for internal use with only a few dozen people utilizing it. For more info on this, you can click here. Click "Create Billing Account."

Image Line Google API 1.4 Image Line Google billing

33. Input your credit card info then hit "Submit and Enable."

34. Your Google API key should then generate. Copy the Google API key and turn to line 136 of the code. Paste your own Google API key.

Image Line Google API 2 Image of 136

35. Commit the changes on the bottom of the page.

Image of Commit

36. Go to settings again, scroll down to GitHub pages to find your own URL link.

Image of link

37. Click the URL and utilize your own geo-locator app!

Image of final


Resource-map how-to instructions






No releases published


No packages published