Neighborhood-Map

Harsimar Singh

---

• Develop a single-page application featuring a map of your neighborhood.
• The live streaming of project.
• Project can be viewed at my Github Repository.

---

Project Details

How do I complete this project?

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

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.

References:

Udacity's Github Repository

• This repository was provided in Lesson 17.
• References for /* -----S-H-O-W---A-N-D---H-I-D-E---F-U-N-C-T-I-O-N-S---F-O-R---M-A-R-K-E-R-S /, / -----M-A-R-K-E-R-----S-T-Y-L-I-N-G----- /, / -----D-R-A-W-I-N-G-----T-O-O-L-B-A-R----- */ were taken from here.

References for Knockout Javascript were taken from here. References for creating Navbar from here.

Steps to run the app:

Open the project through the .zip file provided and extract file. To open Index.html:

• Open the main folder.
• Open Index.html.
• Click on the list or the markers on map to see ratings for that particular Eating Joint.

To open app.js:

• Open js folder in main folder.
• Open app.js.

Steps to make the app:

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 Javascript 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 function 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.

App is completed! Have fun exploring delicious places!