5
cs301 logo
rainbow animatio

CS301 F2007 Homework #7
Create a rich Internet web application with AJAX, Google MAP API

Goal:

Assignment Date: 11/19/2007
Due Day: 12/3/2007

Description:

In this homework, we will apply the AJAX, Google MAP, XML, and SQL database techniques to create a web application to help health care users who are with Kaiser Permanente (Insurance) and Colorado Springs Health Partner  (Doctor Group) to choose a different doctors,  due to the unsuccessful negotiation between the two organization. Hope we can aleviate the pains of those users.  We will save the information of physicians in a database and retrieve them either as Keyhole Markup Language to be displayed on Google Map or to be retrieved by a web page with AJAX code to be displayed on an embedded google map.  With an input box to allow user to enter their home address, and with a selection input for choosing the category of physicians, we would like to display the locations of the user and that of the selected doctors.   Bonus Exercise: sort the list of doctors according to the distance from the user and indicate the distance info. For example, http://econym.googlepages.com/example_dist.htm shows how to calculate the direct distance between two markers usign distanceFrom method.  It would be even nice if you can use the drive distance from direction web service.

Location Data for the list of doctors affliated with Kaiser Permanente is available at http://members.kaiserpermanente.org/kpweb/pdf/col/cos_affprac.pdf Pages 4-18.  I have copied and edited the list and put them in http://cs.uccs.edu/~cs301/googlemap/drlist/kaiserDrList.txt for online processing. Choose two categories of physicians in the list for your exercises and select a subset of physician in that category, and ave the name, address, and phone number of the physician, and the type of practice, and the group/clinic they belong to in database table drlist with your MySQL account.

Part 1. Create a web page php script, getList.php, to retrieve the physician data from the database given the selected category and formulate them as table.

Part 2. Create an AJAX web page, getList.html, that provide select element for selecting physician category and retrieves the selected physician data from getList.php and display in a div element.

Part 3. Extend getList.html as gmapList.html with embedded Google Map for displaying the locations of the physicians based on the user's category selection as markers, and display more detailed information, the name, address, phone number of the physician, and the associated clinic if any, in a popup info window when the user clicks on the markers.

Resource:

Follow Mike William tutorial to learn about how to create markers and related info. http://www.econym.demon.co.uk/googlemaps/

Sample of code from "Beginning Google Maps Applications with PHP and AJAX" by Michael Purvis, Jeff SAmbells, and Cameron Turner, also avaiable at http://cs.uccs.edu/~cs301/googlemap/gmaps_php_code/

We will show in class how to set up api key and basic google map api for this application.