This is a single page application featuring a map of Pittsburgh (PA) with several functions including highlighted locations, third-party data about those locations and various ways to browse the content. In particular, the map displays all sorts of geeky places in and around Pittsburgh. It uses the Google Maps API, the Google StreetView API, the Twitter API, and the Foursquare API to enhance the user experience.
Note that the explanations given below are for Windows 7
- Bower Package Manager: Install Bower by opening a terminal and type
npm install -g bower - Knockout.JS: Install Knockout by opening a terminal and type
bower install knockout
- Navigate to the Foursquare Developer Website here
- Set up a Developer Account or log in
- Create a new Project
- Copy the Client ID and the Client Secret
- Paste the values into the app.js file into the given variables. Check for "YOUR ID" and "YOUR SECRET"
- Navigate to the Google Developer Website here
- Create a new project
- Enable the Google Maps JavaScript API under Google Maps APIs
- Enable the Google Street View Image API under Google Maps APIs
- Enable the Google Maps Geocoding API under Google Maps APIs
- Select "Credentials"
- Retrieve your API Key
- Change the given key in the index.html file to your API key (The key can be found in the index.html file in line 75)
Run the code by opening the index.html with a browser
- The Twitter API does not work correctly: Please disable the Adblocker in your Browser and refresh the page. The Adbloker often blocks the Twitter Widget from loading correctly.
- The Foursquare API does not work correctly: Please make sure that you have entered your Client ID and Client Secret correctly.