zgrauer / vacation-planner

A single-page application featuring a map of a future vacation spot. The map is generated by Google's Map API and map markers are added in JavaScript to identify popular locations to visit. List & marker filtering exists to easily discover these locations. A listview on the left of the UI exists for simple browsing of locations. When a list item or map marker is clicked, an info window is opened with data from third-party APIs.

Vacation Planner Map

---

What is it?

A single-page application featuring a map of a future vacation spot. The map is generated by Google's Map API and map markers are added in JavaScript to identify popular locations to visit. List & marker filtering exists to easily discover these locations. A listview on the left of the UI exists for simple browsing of locations. When a list item or map marker is clicked, an info window is opened with data from third-party APIs. Data from Google StreetView, Google Places, and Wikipedia is loaded asynchronously.

Knockoutjs 3.4.1 is used for data binding, auto-refreshing the UI, and templating. All JavaScript code is organized using the MVVM pattern. jQuery 3.1.1 is required for Bootstrap components and is used for AJAX API queries.

Installation

1. After cloning this repository, get a Google API key. This is used to access their API in this web app.
2. Enter your Google API key on line 13 in the .\js\api\google.js file. Without this, you cannot access Google's API.

   this.googleApiKey = "ENTER_YOUR_KEY_HERE"

Development

To add, update, or delete locations from the map, open locations.json in the root directory and update the objects within. This file is the data source for the application. The lat and lng is used to obtain more accurate pictures from Streetview, like a specific point in the building. This data can be obtained from Google Maps by right-clicking on the map and selecting What's here?.

{
   "locations":[
      {
         "address":"4510 Paradise Rd",
         "city":"Las Vegas",
         "state":"NV",
         "zip":"89169",
         "country":"USA",
         "name":"Hofbrauhaus",
         "location":{
            "lat":36.107736,
            "lng":-115.151616
         }
      },

All HTML used is contained in file index.html, which can be found in the root directory. This is the file to serve and open to run the application.

Data in the HTML file is bound using Knockoutjs and the code in the ViewModel. The ViewModel (.\js\viewmodels\app.js) initializes the map and binds the data between JavaScript and HTML. This line at the end of the app.js file is what causes the magic to happen.

ko.applyBindings(new ViewModel());

When Knockout applies the bindings from the ViewModel, this jQuery code is executed to asynchronously initialize the Google Maps API and display it within the #map div. If the script cannot be loaded, then a Bootstrap alert is displayed on screen. This same type of behavior is used for the other API requests. If the request fails, an alert is displayed to the user.

$.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyB_AMvD-EHQYqW9nSE-0MXaKSVCi64ri94&libraries=places&callback=gMaps.initMap')
    // If successfull then map is initialized.  Load locations & add markers.
    .done(function(script, textStatus) {
        console.log('Google Maps API loaded. Adding markers');
        self.loadLocations();
    })
    // Failed to initialize map. Add Bootstrap alert to page.
    .fail(function(jqxhr, settings, exception) {
        console.log('Error loading Google Maps API! Exception: ' +
            exception + ' Status: ' + jqxhr.status);
        $('#map').append('<div class="alert alert-danger" style="margin-top:200px;" role="alert"><strong>ERROR!</strong> Unable to load Google Maps.</div>');
        $('.location-list').hide();
    });

Styling of the UI can be changed using CSS in file .\css\style.css. Comments within this file denote groupings and organization of code. The other *.css files are required by Bootstrap, which is used for UI features such as tooltips, alerts, layout and can be left alone. Use .\css\style.css to override any Bootstrap stylings.

Todos

• Add additional APIs to get location data. (TripAdvisor, Yelp, etc.)
• Add favorite feature on locations
• Add server & DB for CRUD functionality on model data

License

MIT