Neighborhood Map

A single page application featuring a map of my neighborhood. The page loads with a list of places i.e local attractions for kids and a Google map featuring place markers corresponding to these locations. A search bar is provided to filter out the desired location which also filters the markers. Upon clicking the listed location or it's marker, the location details available at that point i.e name, address and URL are displayed. The page is responsive and for smaller devices, starts off with a map only default display. A glyph hamburger menu button is provided to toggle the look of the page.

Contents

Project files :
index.html - HTML5 page with the app content i.e list of places, search bar, map with the listing markers.
app.js - Javascript file that includes the Knockout's MVVM organization framework for Model and ViewModel.
styles.css - CSS3 Stylesheet for the page styling.

APIs, Frameworks used

Google Maps API - Javascript API loaded asynchronously for enabling Google map functionality
Knockout JS - JavaScript library used to create a responsive user interface, dynamic UI and model updates using the MVVM architecture
Bootstrap for CSS - Framework used for styling the webpage
Foursquare venue details API - Venue details are fetched asynchronously
jQuery - Library used for HTML Document Object Model manipulation and asynchronous requests

Installation

Download the project files and open the index.html in the browser.

References

Udacity Forum
KnockoutJS
BootStrap
Google Maps API
jQuery Documentation
Foursquare API
MDN