This project was created for Udacity's Front End Nanodegree several years ago when they taught Knockout. Some people have contacted me about this project who are using it for learning purposes and have had trouble with getting the Google Maps API setup for free. See the latest that I found out about this under the "APIs Used" section below, but I can't guarantee it will still work so I am archiving this project.
This project uses the Google Maps API and USDA National Farmers Market Directory API to create a mashup where visitors can search for Farmers Markets in the US by entering a zip code, then Farmers Markets near that zip code will be shown on the map. You can click on a marker or an item in the result list to view more info about the market such as address, schedule, and products.
Use the app online at https://farmersmarkets.kelli.app
Assumes local installation of Node.js
To run the project locally:
- Clone or fork this repository.
- Update
YOUR_KEY_GOES_HERE
on the following line (right above the closing body tag) insrc\index.html
with your Google Maps JavaScript API key:
<script async defer src="http://maps.googleapis.com/maps/api/js?v=3?key=YOUR_KEY_GOES_HERE&callback=init" onerror="mapLoadError()"></script>
Note: Google now requires a billing account to be setup for using the Google Maps API. See Get Started with Google Maps Platform for more information. - Run
npm install
- Run
npm run build
(Also run this after changes are made to code in thesrc
directory - the production code will then be output to adist
directory.) - Open
index.html
in thedist
directory in a web browser.
- USDA National Farmers Market Directory API - No API Key needed, but see API Terms of Service which has text for the required attribution.
- Google Maps API - a Google Maps JavaScript API key is required.
Note: Google now requires a billing account to be setup for using the Google Maps API. See Get Started with Google Maps Platform for more information.
Note: If you put the project online, you should restrict the websites that the Google Maps JavaScript API key will work on since this is a Front-End only app and the key will be visible in the source code. To do this, go to your project in the Google Cloud Console and under APIs & Services > Credentials > Choose API Key: look under Application restrictions > Website restrictions where you can add websites that the key will work on.
The code in this project is licensed under the MIT License. See LICENSE for details.
Note that you will be responsible for following terms of service of the third party APIs used in the code.