Udacity - Project 7 - Neighbourhood Map This app utilizes the Google Map API, Instagram API, & Knockout.js
This application displays a Google Map of Ipanema, Rio de Janeiro and listing of "Bars" within the Ipanema area. The application is self contained. This was one of the projects in the Udacity Front-End Web Development Nanodegree. The project allowed students to apply the concepts learned in the Intro to AJAX and JavaScript Design Patterns classes.
Place the contents of this repository in a directory and open the index.html file in a web browser.
- The Application will load "Bar" locations, as well as the Google rating, into a map of the area. The Google location type = 'bar' is used and search radius of 1000 meters.
- Each location will be represented by a marker on the map. You can click on any of these markers to display a window of details on the selected location, which will include Name, Address and if the location is currently open.
- Both the List and the marker are clickable to focus on that particular location and will load Recent Instagrams Images with tags for the location into a horizontally scrollable bar at the bottom.
- A Search Bar is provided to filter out results and display only relevant locations into a list.
- To filter the list, enter the search term and press enter. If any part of the term appears in the name or address of the location it is returned in a filtered list. To reset the list, Clear the contents of the filter box and hit enter.
- Typing in the search box will limit the results in both the map markers as well as the list of locations, after the Search button is pressed or use of the "Enter" key.
- Clearing out the typed information in the search box will return all available markers, fter the Search button is pressed or use of the "Enter" key.
Google Map Instagram