Awesome Open Source
Awesome Open Source

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.

Farmers Market Finder

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.

Demo

Use the app online at https://farmersmarkets.kelli.app

Farmers Market Finder - Animated gif demo

Run Project Locally

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) in src\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 the src directory - the production code will then be output to a dist directory.)
  • Open index.html in the dist directory in a web browser.

Technologies Used

APIs Used

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.

License

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.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,550,642
Api (22,096
Bootstrap (9,924
Jquery (7,862
Google Maps Api (1,148
Grunt (471
Related Projects