Source code for my fifth project for the Full Stack Web Developer Nanodegree (FSWDN) program from Udacity.
This project is a single page web application featuring a list of nearby running trails and a map with the corresponding markers. The map can be used to search for trails which can then be saved or deleted (in a Firebase database). Additional info is displayed when clicking on the trail markers or the list items. A list with 6 default locations is shown if no trails have been saved.
Clone or download the repository on your computer.
Install Yarn.
From within the project folder, install all dependencies using yarn install.
Open index.html with your favorite browser.
Create a Firebase project and add a Firebase Realtime Database by following this guide. Upload the content of default_firebase_database.json if you want to populate the database with default locations.
Get a free api key for TrailAPI.
Then update the script at bottom of index.html:
<script>
// Initialize Firebase
const config = {
apiKey: "<API_KEY>",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>"
};
firebase.initializeApp(config);
// TrailAPI key
const trailApiKey = "<TrailAPI_API_KEY>";
</script>
Go to the Google APIs Console and create your own project. Add the Google Maps JavaScript API to your project then replace the api key in the last script of index.html with your own:
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=<YOUR_API_KEY>&v=3&callback=googleMap.init"></script>