Cairo Downtown Map Project

Developed for Neighborhood Map project of the Udacity Front-End Web Developer Nanodegree.

Project Description

This is the final Project in the Udacity front-End developer Nanodegree . The aim of this project is to create a neighborhood map with my locations of interest.

Project Features

• Used Google Maps API to generate the map and the map is centered on Downtown of Cairo, Egypt.
• Initially added 5 locations however it's very easy to add new locations by simply adding a new location to the global locations array.
• The App allows for filtering the map by typing a query with a location name in the search box, using knockoutJs.
• For each location there is a location marker on the map that is automatically updated, also using knockoutJs.
• For each location marker there is an animation added that is shown on mouse over or if location is clicked from the side navbar.
• The info window generated on each location marker is filled using Wikipedia API.

How To Use

1. First clone/Download the project Folder.
2. Open index.html
3. Click on any of the locations on the map or on the navbar to fire animation and to see more information about the location.
4. To filter available locations type a location name in the search bar.