Neighbourhood Map

A single page application featuring a map of your neighborhood or a neighborhood you would like to visit with the functionalities including map markers to identify popular locations or places you’d like to visit, highlighted locations, a search function to easily discover these locations, a listview to support simple browsing of all locations and third-party data about those locations

Open and view the Project using the .zip file provided or at my Github Repository having folder Neighborhood Map.

The project is also hosted on GitHub.

Table of Contents

• Getting Started
  • Tools Required
  • Installation
• Development
  • Part 1: Google Maps API and Foursquare API
  • Part 2: Include jQuery and Knockout Javascript
  • Part 3: Include CSS file, Bootstrap library and Google Fonts
  • Part 4: Creating and coding Javascript in app.js and init.js
• Running the App
• References

Getting Started

The aim of this Project is to make a "Map of a Neighborhood" showing famous local Eating Joints with their ratings.

This project was made from scratch and is a part of Udacity's Front-End Web Developer Nanodegree program. The project will be evaluated by a Udacity code reviewer according to the project rubric

Tools Required

• Google Maps API to load map
• Foursquare API to fetch data for the eating joints
• Foursquare API Explorer to fetch ratings(or other details if required)
• Knockout Javascript to bind data
• jQuery (Javascript Library) for easier coding of javascript
• Bootstrap to make the page responsive
• Google Fonts to add stylish text
• Color-Hex to add hexa-decimal color codes in css
• HTML Beautifier to Beautify HTML
• CSS Beautifier to Beautify CSS
• JS Beautifier to Beautify JS
• Online Markdown Editor to test README.md
• Google Maps Animation to animate markers

Installation

No additional installation is required for this project

Development

Part 1: Google Maps API and Foursquare API

• Generate a unique key from Google Maps API and create index.html.
• Set the center and zoom accordingly
• Sign up on foursquare.com, create a new app which which provide CLIENT_ID and CLIENT_SECRET for that app. These unique ID's will be used for fetching data from foursquare.com using AJAX

Part 2: Include jQuery and Knockout Javascript

• Use the above mentioned links and append them in index.html

Part 3: Include CSS file, Bootstrap library and Google Fonts

• Create a style.css file in css folder with all required styling and link it to index.html
• Use the above mentioned link for Bootstrap and link it in index.html
• Use the above mentioned link for Google Fonts and link it in index.html and style.css

Part 4: Creating and coding functionalities in app.js and init.js

• Create initMap and navToggle functions in init.js

• Now in app.js, create an object of eating joints with their name, coordinates and unique Id generated from foursquare.com. Create Viewmodel with functions to:

  Create Markers
  Fetch information for Markers from foursquare.com using AJAX request
  Create Infowindows with relevent information
  Display information fetched from Foursquare API Explorer on clicking them
  Style Markers
  Show selected Marker
  Bind data for Search Bar using Knockout Javascript
  Show and Hide Markers
  Create, toggle and add features to Drawing Toolbar
  

For details now how these functionalities have been implemented, refer the source code.

App is completed! Have fun exploring delicious places!

Running the App

• Open the project through the .zip file provided and extract file

  Open index.html in the browser of your choice.

• Click on the list or the markers on map to see ratings for that particular Eating Joint
• User the search bar to filter out the restaurants in the list as well as in the map

References:

• Udacity's Github Repository

  This repository was provided in Lesson 17
  References for SHOW AND HIDE FUNCTIONS FOR MARKERS, MARKER STYLING, DRAWING TOOLBAR were taken from here.
  

• Knockout Javascript Docs
• Responsive Navbar from Codepen
• Example App provided by Udacity