Watch this short screencast to see our AM3 application in action. Scroll down the page to press the play button.
In the fourth week, we will learn about the Google Maps API. While Google Maps itself is a wonderful technology, our goal in this AM is to make use of this API in the context of an application that combines two APIs. The example in the screencast combines user input with Google Maps and the Wikipedia API to show information about different cities. Additionally, the app is keeping track of how many miles a user has traveled.
The Google Maps API returns only distances for driving, walking or public transit modes of transportation. This is whay the first screencast shows locations in Europe only, which are all reachable by car. In the second screencast below, you'll see that adding a city outside the continental North America, such as Lima in Peru, makes the app ignore the distance there (because the API cannot calculate it), although it shows on the map where the city is.
In this AM, you are free to choose one of the following scenarios.
The complete app shown in AM3 is an advanced app that has many features. We will break it down during this week, but clearly, it is more complex than the first two AMs (that is the point of these AMs, to continue learning by challenging ourselves). Depending on how much time you can devote to this AM this week, you can choose a level, do very well at it and stop there, leaving the other levels for when you have time (ungraded, but for your own learning benefit).
Level One: In this level, you create an app that only uses the Google Maps API and takes input from the user. The user can enter different addresses (city names or zip codes), and you show on the map these locations with markers, on a marker click you display the address in an info window, and you either find the distance between two locations by drawing or by using the API. Your app uses some CSS to look reasonably well. Completing such a level successfully will give you a B- grade.
Level Two: In this level, you use a second web API to collect interesting information to add to the Level One app. You'll use skills you learned in AM1 or AM2 to send requests to an API, process the response, and display it meaningfully. An app of this level needs to send more than one requests to the API and keep track of the responses, so that it doesn't need to re-ask the API again. For example, in the screencast, we send requests to the Wikipedia API for every city separately, only once. The responses are stored, so that when a user clicks on a marker again, the answer is instanteanous. Completing this level successfully will give you an A- grade.
Level Three: In this level, you make the app engaging by using different animation features such as the ones shown in the screencast. For example, revealing information piecewise, displaying the info about the cities as a slideshow without the user having to click, use colors and fonts to focus attention, etc. Basically, you're making your app as perfect as possible. Completing this level successfully will give you an A+ grade.
Here are instructions for how to submit your work.
cs249 folder add the folder AM3.
AM3 should have three files am3.html,
am3.js and am3.cssthat you wrote to
develop your new app.
index.html file in cs249
to add the link to your am3.html page.
/* Filename: am3.js Author: Wendy Wellesley Date: Feb 23, 2015 Goal: Javascript code for implementing an app that works with Google Maps API and Wikipedia API. Honor Code Statement: On this task I collaborated with Harry Potter and Hermione Granger. I had difficulty with the XXX issue, but Hermione gave me a good example to understand it. All the code in these files was typed by me. */