6. Google Maps API Application
The work is structured in five main parts, each one adding incremental functionality to the code you are asked to develop.
You are asked to write code in HTML5 and Javascript to implement an interactive Google Maps API application. The application is supposed to work on a Web browser (for instance Chrome, Explorer, Safari etc.). The idea is to build the application incrementally, following carefully the instructions provided in the five parts described below. Each part will give you more marks. Part 1 is required to reach a pass, while the Part 5 is required for you to achieve excellence.
Part 1: basic code, worth a D grade (based on material taught in the first three lectures)
In Netbeans or any equivalent integrated development environment (IDE), create a new project; give it a reasonable name, as GMAPSapi. Make sure you have three files for the cascade style sheets, Javascript and HTML code. Create code that displays a map, centres it in a geographical location of your choice. You are asked to implement three buttons: 1. Button 1 that interactively changes the location on the map, asking the user for the new coordinates, Button 2 that adjusts the zoom to a level defined by the user, 3. Button 3 that allows the user to drop a marker of their choice (style, colour and number) in a location of their choice.
Part 2: worth a C grade
In this part you are asked to add a button (Button 4) that will allow the user to add a marker of their choice with a particular mouse event handling. Another button (Button 5) has also to be implemented to allow the user to add weather information in the geographic area you have chosen.
Part 3: worth a B grade
In this part you are asked to populate a geographic area of your choice with rich information windows. In the area you will be asked to add clickable markers that pop information windows with videos and HTML-formatted text describing the area of the marker.
Part 4: worth an A grade
In this part you are asked to add a button (Button 6) that allows a user to add nodal points of a region in space. The region will be then highlighted in a colour of the user’s choice. Each nodal point of the region and the point in the centre will have markers where a detailed map can be displayed in information windows.
Part 5: to reach an A+ grade
This is the most difficult part of the assignment. You are asked to add a button (Button 7) that will display dynamically information of a region, while it zooms in. The button will trigger the zooming action, at the centre of the window and while zooming, different information will be displayed. Zooming will halt for a few seconds, to allow the user to read the information displayed at that specific zooming level.
Marking will be carried out during the last workshop, on the 20th March 2014, from 4pm until 7pm. There will be three people marking your code in parallel, Paolo Remagnino, Pau Climent and Omid Raghimi. Each student will be marked in 10 minutes, so, we are expecting you to prepare a short introduction and demonstration of your code (5 minutes) and then get ready to answer questions about your code (5 minutes).