Project 5 Udacity Project: Showcasing my local neighborhood on Google Maps with several places of interest.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Project 5: Neighborhood Map

What It Is

This Web Application showcases a Chicago neighborhood with 7 default markers provided with more information when clicked.


Filter locations: Includes a text input field or dropdown menu that filters the map markers and list items to locations matching the text input or selection. Filter function runs error-free.

List View: A list-view of location names is provided which displays all locations by default, and displays the filtered subset of locations when a filter is applied. Clicking a location on the list displays unique information about the location, and animates its associated map marker by bouncing.

Center Map: A compass icon that whenever clicked on reverts user back to the main focus of the map.

Required Libraries and Dependencies

**** Everything is already included (Device and Browser is your responsibility!) ****

  • Internet Connected Device
  • Modern Web Browser
  • Google Maps API
  • Foursquare API
  • Knockout JS
  • jQuery
  • Bootstrap

Project Contents

This project consists the following files and directories:

  • index.html - The main html file that displays the map and is attached to all of the js scripts and stylesheets.
  • styles.css - CSS file that contains all of the styles for the web app.
  • - This read me file.
  • app.js - Javascript file that contains the Google Maps API, Foursquare API and Knockout JS code.

Basic Instructions

  1. Download the zip to a directory you'll be working in.
  2. Unzip the file.
  3. Open the index.html in a modern browser.
  4. Click markers or list items to select a location and retrieve info about it.
  5. Type into the filter/search box to filter the shown locations.
  6. Click 'show' or 'hide' on top of the list to collapse or expand the list.


Resources Used:

  • StackOverflow
  • Udacity Javascript Design Patterns Course
  • Udacity Intro to AJAX Course
  • Knockout JS Documentation & Tutorials
  • Google Maps API Documentation
  • Foursquare API Documentation