Homework Assignment #3 Solution

1 Description

 

The objective of this assignment is to develop your JavaScript skills, introduce you to ‘Google Maps JavaScript API’, ‘Google Places JavaScript library’, ‘Google Maps Directions Service’, and geolocation. While the Google Maps API will be introduced in subsequent lectures, developing and/or bolstering 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. Teaching a specific API is counterproductive in such an environment. Instead, one of the objectives of this assignment is to motivate you to develop and/or 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 additional 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 Preparation/Reference

 

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 tutorial. The tutorial can be found at the following link:

 

https://developers.google.com/maps/documentation/javascript/tutorial

 

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://developers.google.com/maps/documentation/javascript/places

2.3 Google Maps Directions Service Reference

 

You can refer the following link to obtain more information about direction service:

 

https://developers.google.com/maps/documentation/javascript/directions

 

2.4 Geolocation Reference

 

You can refer the following link to obtain more information about geolocation:

 

https://developers.google.com/maps/documentation/javascript/geolocation

 

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 (44.9727, -93.23540000000003) with zoom level of 14 (or any zoom level that you find appropriate). University coordinates can also be obtained using the following link:  https://www.gps- coordinates.net/

 

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/input area between the table and the map. The elements

in this form/input area will require you to use ‘Google Places JavaScript library’ and

‘Google Maps Directions Service’.

 

5.   The first row of these elements consists of:

●    A t e xt  i nput  fi e l d l a bel le d  ‘Ra di us’  : Specifies the numeric radius around your current location in which the search results will preferably be shown.

●    A drop-down fi e l d  l a bel le d  ‘Ne a rby’  : 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://developers.google.com/places/supported_types.

Make sure that at least one search result pops-up for each of the categories you include.

●    A but t on  l a be l l e d  ‘Sea rc h  Nea r  Me ’  : Upon clicking 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 (e.g. the markers for your favorite 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 ‘De st i nat i on’  : 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  do wn  fi e l d  l a bel le d  ‘Mode  Of  T rave l ’  : Four modes of travel are specified and they are: DRIVING, WALKING, BICYCLING, and TRANSIT. One of these must be selected at all times.

●    A but t on  l a be l l e d  ‘Ge t  Di rec t i ons’  : 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 code (JavaScript). Make use of ‘Google Maps Directions Service’ for this functionality.

 

7.   Retain the twitter widget developed for the second homework.

 

8.   You will add an extra field labelled ‘Additional Info URL’ in the form developed for the

second homework. This field will be optional and will accept a URL as input.