Assignment
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
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.
Total marks for this coursework is 20
1 | Page
...
AssignmentThe work is structured in five main parts, each one addi.docx
1. Assignment
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
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.
2. 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.
Total marks for this coursework is 20
1 | Page
