CSCI 4131 – Internet Programming
Homework Assignment 3
Posted February 3 rd (VVersion 2 , U p d a t e F e b 7 t h )
Due Date:: Friday Feb 16 th at 11 : 55 pm
Late Submission (wwith penalty)) Deadline:: Saturday,, Feb 17 th at 11::555 am..
1 Description
The objective of this assignment is to develop your JavaScript skills,, introduce you to ‘GGoogle Maps JavaScript API’’,, ‘GGoogle Places JavaScript library’’,, ‘GGoogle Maps Directions Service’’,, and geolocation.. While the Google Maps API will be introduced in subsequent lectures,, developing and//oor bol stering the ability to read library documentation and then use it to develop functionality is an essential skill for today’s web developer.. New libraries with new APIs are introduced,, and existing libraries and their APIs are updated,, on a regular basis.. T eaching a specific API is counterproductive in such an environment.. Instead,, one of the objectives of this assignment is to motivate you to develop and//oor bolster your skills to learn and use new libraries and APIs.. This assignment specification has 8 pages..
For this assignment,, you will embed google map to the already developed functionality for homework 2.. You will write code to dynamically mark your favorite places on the embedded google map.. You will develop addi tional functionality to search for specific places near your current location.. In addition to this,, you will be asked to calculate directions and display route between your current location and destination using various modes of transportation..
2 Preparati on//RReference
2.1 Google API Setup
A small amount of setup is required to use the Maps API – you need to get your API key.. Google provides an excellent tutorial for obtaining your API key and setting up your map,, and it is recommended to complete the tutori al.. The tutorial can be found at the following link::
https::////ddevelopers..ggoogle..ccom//mmaps//ddocumentation//jjavascript//ttutorial
When signing up for your API key,, use your UMN x500 account.. You are not required to have a separate Google account for this course..
2.2 Google Places JavaScript Library Reference
You can refer the following link to obtain more information about places library::
https::////ddevelopers..ggoogle..ccom//mmaps//ddocumentation//jjavascript//pplaces
2.3 Google Maps Directions Service Reference
You can refer the following link to obtain more information about direction service::
https::////ddevelopers..ggoogle..ccom//mmaps//ddocumentation//jjavascript//ddirections
2.4 Geolocation Reference
You can refer the following link to obtain more information about geolo cation::
https::////ddevelopers..ggoogle..ccom//mmaps//ddocumentation//jjavascript//ggeolocation
3 Functionality
1.. Start by modifying the favorites page from homework 2 to embed a google map under the table.. You can remove the image which present under the table earlier .
2.. The map should be centered on University coordinates (444.9727,, – 93.23540000000003)) with zoom level of 14 (oor any zoom level that you find appropriate)).. University coordinates can also be obtained using the following link::
https::////wwww..ggps – coordinates..nnet//
3.. Upon page load,, the JavaScript code written by you should dynamically extract the names and addresses of your favorite places from the DOM objects that make up the table.. An animated marker for each of these extracted locations should be placed on the map using the extracted address information.. The markers should display the name of the place upon being clicked.. This can be achieved using an information window..
4.. The next step is to insert a form//iinput area between the table and the map.. The elements in this form//iinput area will require you to use ‘GGoogle Places JavaScript library’’ and ‘GGoogle Maps Directions Service’’..
5.. The first row of these elements consists of::
● A text input field labelled ‘RRadius’’ : Specifies the numeric radius around your current location in which the search results will preferably be shown..
● A drop – down field lab elled ‘NNearby’’ : Lists categories of places for which you can search . The default categories for this homework are:: restaurant,, hospital,, museum,, and supermarket.. You can replace these categories with additional categories present at::
https::////ddevelopers..ggoogle..ccom//pplaces//ssupported_types
. M ake sure that at least one search result pop s – up for each of the categories you include .
● A button labelled ‘SSearch Near Me’’ : Upon c licking this button,, your code should find all the places within the specified radius using ‘ Google Places JavaScript library’’ and display the results by placing a marker on the map for each of the places found . The old markers (ee..gg.. the markers for your f avorite places,, and markers for any other category)) should be cleared before placing new markers on the map.. Upon clicking on the marker,, the name of the place should be displayed..
6.. The second row of the elements consists of::
● A text input field labelled ‘DD estination’’ : Allows the user to input the destination location.. The source location will be the current location of the user and it can be obtained using geolocation..
● A drop down field labelled ‘MMode Of Travel’’ : Four modes of travel are specified and they are:: DRIVING,, WALKING,, BICYCLING,, and TRANSIT.. One of these must be selected at all times..
● A button labelled ‘GGet Directions’’ : Upon clicking this button,, the route between the current location and the destination should be displayed on the map.. The route displayed will be based on the mode of travel selected by the user.. The directions associated with this route should be displayed on a scrollable side panel floating to the right of the map.. Directions involving higher number of instructions should be wrapped into this fixed dimension panel with the scrollable feature.. The source for the directions is the user’s current location extracted using Google geolocation services.. The source coordinates should not be hard – coded,, they should be extracted dynamically using co de (JJavaScript)).. Make use of ‘GGoogle Maps Directions Service’’ for this functionality..
7.. Retain the twitter widget developed for the second homework..
8.. You will add an extra field labelled ‘AAdditional Info URL’’ in the form developed for the second homework.. This field will be optional and will accept a URL as input..
4 Screenshots
4.1 Table with a list of favorite places
4.2 Map with the favorite places from the table (yyou can choose custom icons for markers))
4.3 Marker shows the name of the favorite place when clicked
4.4 Map showing the result of nearby museums in a radius of 1500
4.5 Map showing the DRIVING route between the current place and Terminal 1 – Lindbergh
4.6 Map showing the BICYCLING route between the current place and Term inal 1 – Lindbergh
4.7 Form
5 Submission Instructions
1.. For this assignment,, you are expected to use and submit separate the HTML,, CSS,, and JavaScript files..
2.. Your submission should include a minimum of 4 files (22 HTML,, and 1 each for JavaScript and CSS))..
3.. Zip these files and the name of the zipped folder should be yourx500id_hw03..
PLEASE ENSURE TO TEST YOUR CODE ON CSE LAB MACHINES..
6 Evaluation
Your submission will be graded out of 100 points on the following items::
1.. HTML files pass w3schools validator (hh ttp::////vvalidator..ww3..oorg)) without errors.. Warnings are accepted ( 5 points )..
2.. CSS files pass w3schools validator (hhttp::////jjigsaw..ww3..oorg//ccss – validator//)) without errors.. Warnings are accepted ( 5 points )..
3.. Map is placed on webpage below the table with proper alignm ent as shown in pictures ( 10 points )..
4.. Animated markers are automatically placed on the locations specified in your table ( 20 points )..
5.. When clicked,, markers display the name of your favorite place ( 5 points )..
6.. Nearby places can be searched within a specific radius and corresponding markers are created on map (110 points)) .
7.. When clicked,, markers display the name of the nearby place ( 5 points )..
8.. All previously displayed markers are removed before the results of a new search are displayed (55 points)) .
9.. Correctly working functionality for finding directions to a custom destination from the user’s current location..
● Receiving destination through input text box and displaying directions on side panel ( 10 points )..
● Providing option to switch between multiple travel modes ( 10 points )..
● Style and alignment of the side panel with scroll feature as shown in picture ( 5 points )..
10.. The form page contains an additional input field to accept URLs.. This field must be labelled ‘AAdditional Info URL’’ ( 5 points )..
11.. All the files required for your solution should be packaged in a tar or zip file,, and submitted via the link on the Moodle class site.. The name of the zipped file should be yourx500id_hw 03..zzip ( 5 points )..