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.
**** 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
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.README.md- This read me file.app.js- Javascript file that contains the Google Maps API, Foursquare API and Knockout JS code.
- Download the zip to a directory you'll be working in.
- Unzip the file.
- Open the index.html in a modern browser.
- Click markers or list items to select a location and retrieve info about it.
- Type into the filter/search box to filter the shown locations.
- Click 'show' or 'hide' on top of the list to collapse or expand the list.
- Mike Fowler for Google Maps Apple-inspired CSS: https://snazzymaps.com/style/42/apple-maps-esque
- StackOverflow
- Udacity Javascript Design Patterns Course
- Udacity Intro to AJAX Course
- Knockout JS Documentation & Tutorials
- Google Maps API Documentation
- Foursquare API Documentation