This is a single-page web application implemented via Bootstrap and Knockout JS, an MVVM JavaScript framework. It also uses the Google Maps Javascript API and Foursquare API via AJAX requests. By using the Google Maps Javascript API, this app shows the map of the west suburbs of Las Vegas, where I grew up. The user can click on one of the displayed markers to view extra information provided by the Foursquare API.
Upon opening the page, the user will be presented with a map with multiple red markers representing different locations of interest in the west suburbs of Las Vegas. When a user clicks on a marker, an infowindow will pop up and display the venue's name, image, Foursquare rating (out of 10), and address. To view additional information, the user can click on the venue's name, which is a link to its Foursquare page.
A menu icon is located on the top-left corner of the map. Clicking it will open the sidebar that shows the name of the application and a dropdown menu of different categories. Other than the default "All Locations" option, the user can view a specific category of venues by choosing one of the categories. This will update the list of venues and only display markers of that chosen category.
In order to complete the project, I referred to the Google Maps Javascript API docs, Foursquare API docs, Knockout JS docs, and Bootstrap Docs.