Homework: TV Listings Google Maps mashup an Ajax/JSON Exercise

1. Objectives
Become familiar with the Ajax, J SON & XML technologies;
Use a combination of HTML, CSS, DOM, XMLHttpRequest, XML and J ava
Servlets;
Provide a Google Maps-based interface to display the current TV Listing of Los
Angeles TV stations.
2. Background

2.1 AJAX & JSON

Ajax (Asynchronous JavaScript +XML) incorporates several technologies:
Standards-based presentation using XHTML and CSS;
Dynamic display and interaction using the Document Object Model (DOM);
Data interchange and manipulation using XML and XSLT;
Asynchronous data retrieval using XMLHttpRequest;
J avaScript binding everything together.
See the class slides at ht t p: / / www- scf . usc. edu/ ~csci 571/ Sl i des/ aj ax. ppt .

J SON, short for J avaScript Object Notation, is a lightweight data interchange format. Its
main application in Ajax web application programming, where it serves as an alternative
to the use of the XML format for data exchange between client and server. See the class
slides at ht t p: / / www- scf . usc. edu/ ~csci 571/ Sl i des/ J SON1. ppt .

2.2 Google Maps

Google Maps (a.k.a. Google Local) is a technology from Google that provides access to
street maps, satellite maps and a combination of the two (called hybrid maps). The
Google Local homepage looks as follows:

1


The Google Maps homepage is available at:

http://maps.google.com/

The Google Maps API is a technology that lets developers embed Google Maps in their
own web pages with J avaScript. You can add overlays to the map (including markers and
polylines) and display shadowed "info windows" just like Google Maps. The Google
Maps API home page is available at:

http://www.google.com/apis/maps/

Note that as of April 3, 2006, Google has released version 2 of the Google Maps API,
with additional support for Geocoding (translating an address into latitude and longitude
coordinates). You will need to use this version of the API, as the input data will be
provided as addresses and not as coordinates. Version 2 of the API is documented at:

http://www.google.com/apis/maps/documentation/

3. Description of the Exercise

To implement a Google Maps interface to the TV Listings that you developed in
Homework #6, you are required to write a combination of HTML, J avaScript and J ava
Servlet programs. The top-level interface consists of three areas:

A Form area including a Download Listings button;
A Map of the United States, implemented using the Google Maps API, and
indicating, using Map Overlays (also known as markers), the location of 8 TV
stations local to the Los Angeles area TV market: KCBS, KNBC, KTLA, KCET,
KABC, KCAL, KTTV and CNN. The overlays are clickable, and when clicked
2
provide information about the TV station in an info window (a bubble),
including:
a. TV station name
b. TV station address
c. TV station phone number
d. Current TV listing (time slot, show name and link) [showing the
complete schedule from HW #6]

Figure 1 below shows the complete interface window, including the details of an info
window after TV listing data has been retrieved and a marker has been clicked.

Important Notes:
a. The markers should use an appropriate custom PNG bitmap. Small
bitmaps for the logos of KCBS, KNBC, KTLA, KCET, KABC, KCAL,
KTTV and CNN are available at:

http://www-scf.usc.edu/~csci571/2008Fall/hw8/kcbs.png
http://www-scf.usc.edu/~csci571/2008Fall/hw8/knbc.png
http://www-scf.usc.edu/~csci571/2008Fall/hw8/ktla.png
http://www-scf.usc.edu/~csci571/2008Fall/hw8/kcet.png
http://www-scf.usc.edu/~csci571/2008Fall/hw8/kabc.png
http://www-scf.usc.edu/~csci571/2008Fall/hw8/kcal.png
http://www-scf.usc.edu/~csci571/2008Fall/hw8/kttv.png
http://www-scf.usc.edu/~csci571/2008Fall/hw8/cnn.png

b. The map should be initially centered on the Los Angeles, CA area;
c. The call names, network name, addresses, phone numbers and link to
logos of the local TV stations are stored in a XML file located at:

http://www-scf.usc.edu/~csci571/2008Fall/hw8/tvstations.xml

d. Note that the map contains the Zooming and Panning controls (on the top
left) and the default 3 map type buttons (map, satellite, hybrid or terrain,
on the top right). Your application should handle these controls
appropriately;
e. Your program should work on both IE and Firefox.


3



Download button

Figure 1. Complete Google Maps-based interface
Info window
marker

You should implement the page shown in Figure 1 using HTML, J avaScript and the
Google Maps API.
Once the Google Maps page is displayed (initially with no markers) and the Download
Listings button is pressed, the form would call a J avaScript function that executes an
XMLHttpRequest to start an asynchronous transaction with a J ava Servlet running under
Tomcat. When using the Google Maps API, you can either use XMLHttpRequest or
GXmlHttp (which shields you from the code to detect the browser), as described in the
API documents at:

ht t p: / / code. googl e. com/ api s/ maps/ document at i on/ i ndex. ht ml
and
ht t p: / / code. googl e. com/ api s/ maps/ document at i on/ r ef er ence. ht ml #GXm
l Ht t p

4
The J ava Servlet in turn retrieves the current TV listings data from
http://tv.yahoo.com/listings by initiating a connection with your Apache server and
executing a CGI program at a location similar to this one:

http://csci571.usc.edu:YourApachePort/cgi-bin/hw6_listings.pl

and then retrieving the XML file generated on your student account, identical to the file
that you created in Exercise #6, using a URL such as:

http://csci571.usc.edu/~YourStudentId/listings.xml


The listings.xml file contains the same XML data as described in Homework #6, as
shown in the partial sample below:

<?xml ver si on=" 1. 0" encodi ng=" UTF- 8" ?>
<TVLI STI NGSRESULTS>
<CHANNELS>
<CHANNEL>
<NAME>ABC</ NAME>
<SHOW>
<TI MESLOT>3: 00pm- 4: 00pm</ TI MESLOT>
<LI NK>ht t p: / / t v. yahoo. com/ l i st i ngs/ gener al - hospi t al / show/ 86
</ LI NK>
<SHOWNAME>Gener al Hospi t al </ SHOWNAME>
</ SHOW>
<SHOW>
<TI MESLOT>4: 00pm- 6: 30pm</ TI MESLOT>
<LI NK>N/ A</ LI NK>
<SHOWNAME>Local Pr ogr ammi ng</ SHOWNAME>
</ SHOW>
</ CHANNEL>
<CHANNEL>
. . . .
</ CHANNEL>
. . . .
</ CHANNELS>
</ TVLI STI NGSRESULTS>

The J ava Servlet then extracts from this file only the listing information for the 8 local
stations (KCBS, KNBC, KTLA, KCET, KABC, KCAL, KTTV and CNN) and returns
the listings information in a J SON file that is obtained asynchronously through
XMLHttpRequest.

The format of the J SON file is as follows:

{f eed:
{t i t l e: " TV Li st i ngs" ,
l i nk: " ht t p: / / csci 571. usc. edu: 8080/ f eed. xml " ,
channel s: [
{name: " ABC" ,
shows: [
{t i mesl ot : " 3: 00pm- 4: 00pm" ,
l i nk: " ht t p: / / t v. yahoo. com/ l i st i ngs/ gener al - hospi t al / show/ 86" ,
5
showname: " Gener al Hospi t al " },
{t i mesl ot : " 4: 00pm- 6: 30pm" ,
l i nk: " N/ A" ,
showname: " Local Pr ogr ammi ng" }
] },

{name: " CBS" ,
shows: [
{t i mesl ot : " 3: 00pm- 4: 00pm" ,
l i nk: " ht t p: / / t v. yahoo. com/ l i st i ngs/ gui di ng- l i ght / show/ 30848" ,
showname: " Gui di ng Li ght " },
{t i mesl ot : " 4: 00pm- 6: 30pm" ,
l i nk: " N/ A" ,
showname: " Local Pr ogr ammi ng" }
] },

{name: " FOX" ,
shows: [
{t i mesl ot : " N/ A" ,
showname: " Local Pr ogr ammi ng" }
] }
] }
}

After obtaining the query results, the J avaScript program places the overlays at the
appropriate locations on the Los Angeles map (after translating the TV station address
from the t vst at i ons. xml file into latitude and longitude values, using the Google Maps
API version 2 Geocoder), for each one of the returned markers. The bitmaps for the
markers are also retrieved from the t vst at i ons. xml file which as the following format:

<?xml ver si on=" 1. 0" encodi ng=" UTF- 8" ?>
<STATI ONS>
<STATI ON>
<NAME>KCBS</ NAME>
<NETWORK>CBS</ NETWORK>
<ADDRESS>4200 Radf or d Avenue</ ADDRESS>
<CI TY>St udi o Ci t y</ CI TY>
<STATE>CA</ STATE>
<ZI P>91604</ ZI P>
<PHONE>( 818) 655- 2000</ PHONE>
<I MAGE>ht t p: / / www- scf . usc. edu/ ~csci 571/ 2008Fal l / hw8/ kcbs. png</ I MAGE>
</ STATI ON>

<STATI ON>
. . . .
</ STATI ON>
. . . .
</ STATI ONS>

Notice that the <NETWORK> tag in the tvstations.xml file corresponds to the channel
name, as returned by tv,yahoo.com. The map should be centered to downtown LA.

The markers are implemented as balloons which, when clicked, bring up a custom
info window, displaying the TV station call name, address, phone number and
current TV listing, as shown in Figure 1.

4. Implementation Hints

1. Step 1: Writing Your HTML program Set up use of Google Maps API
6

Your HTML should include the prologue required by Google Maps, including
proper DOCTYPE, namespaces, style and a script that passes your Google
maps API key, such as:

<! DOCTYPE ht ml " - / / W3C/ / DTD XHTML 1. 0 St r i ct / / EN"
" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- st r i ct . dt d" >
<ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " >
<head>
<met a ht t p- equi v=" cont ent - t ype" cont ent =" t ext / ht ml ; char set =ut f -
8" / >
<t i t l e>Googl e Maps J avaScr i pt API Exampl e</ t i t l e>
<scr i pt
sr c=" ht t p: / / maps. googl e. com/ maps?f i l e=api &amp; v=2&amp; key=
ABQI AAAA6gpvPmzg5cB8NSnt 79F-
xBTpzY8j YW9xcm5_L9s0QI AeskI t ExQQMQUt J YbbBL5r t 4Gr r TPHPTp22g "
t ype=" t ext / j avascr i pt " ></ scr i pt >
<scr i pt t ype=" t ext / j avascr i pt " >

</ scr i pt >

Important Note: You need to replace the key

ABQI AAAA6gpvPmzg5cB8NSnt 79F-
xBTpzY8j YW9xcm5_L9s0QI AeskI t ExQQMQUt J YbbBL5r t 4Gr r TPHPTp22g

with your own Google Maps API key. See the API documentation at:

ht t p: / / code. googl e. com/ api s/ maps/ document at i on/ i nt r oduct i on. ht ml
#The_Hel l o_Wor l d_of _Googl e_Maps

2. Step 3: Writing your JavaScript Program set up the base US Map

Use the Google Maps API to create a map of the United States and center it
initially on the LA area, using the GMap2 and set Cent er properties, and display
the map when the HTML loads, as in:

f unct i on onLoad( ) {
var map = new GMap2( document . get El ement ByI d( " map" ) ) ;
map. set Cent er ( new GLat Lng( 33. 9300, - 118. 4000) , 11) ;
<ot her j avascr i pt code . . . . >

<body onl oad=" onLoad( ) " >
<di v i d=" map" ></ di v>
<di v i d=" message" ></ di v>
</ body>

The above sample code centers the map on the LAX Airport. You should center
your map to the Downtown LA area. You can use Google Earth to find latitude
and longitude coordinates of any location in the Los Angeles area. Information
on how to download and run Google Earth is available at:

7
ht t p: / / www. googl e. com/ ear t h/

3. Step 4: Writing your JavaScript Program set up Google Ajax transaction

The J avaScript invoked by the Download Listings button click event should do
all of the following:

a. Assign the callback function;
b. Assemble the ur l parameter of the GET as a reference to the J ava
Servlet to be invoked:

BASE_URL + " / ser vl et / aj ax_maps"

c. Call the XMLHttpRequest method (see Ajax Slide 31) and cerate the
request object. Alternatively you can use the Google Maps version of
XMLHttpRequest, called GXmlHttp, that works on most browsers:

var r eq = GXml Ht t p. cr eat e( ) ;

d. Prepare the GET XMLHttpRequest using the set Request Header
method:

r eq. open( " GET" , ur l , t r ue) ;
r eq. onr eadyst at echange = myCal l back;
r eq. set Request Header ( " Connect i on" , " Cl ose" ) ;
r eq. set Request Header ( " Met hod" , " GET" + ur l + " HTTP/ 1. 1" ) ;

4. Step 5: Writing your JavaScript Program Execute Ajax Transaction

The J avaScript should finally invoke the XMLHttpRequest send method (see
Ajax slide 31).

The callback function should check for completion of the transaction (request
r eadySt at e equal to 4 and st at us equal to 200 (see AJ AX slide 34 and J SON
slide 5); use eval ( ) and the r esponseText method to retrieve the resulting
J SON data (see J SON slide 5), and use the appropriate Google Maps APIs to (a)
use the Geocoder API to translate addresses into latitude and longitude
coordinates and (b) place the markers on the US map (see GMar ker object) and
respond to marker clicks by displaying the info windows (see the marker
property openI nf oWi ndowHt ml ).

5. Step 6: Use the Java Servlet to respond to XMLHttpRequest and retrieve the TV
listings

The J ava Servlet referred above as / ser vl et / aj ax_maps (see 3.c above)
should be invoked using doGet ( ) .

The J ava Servlet should do all of the following:

8
a. Initiating a connection with your Apache server and executing a CGI
program to retrieve the TV listings from tv.yahoo.com;
b. Wait until the CGI program finishes and creates the XML output file;
c. Open an input data stream with the URL:

http://csci571.usc.edu/~YourStudentId/listings.xml


6. Step 7: Use the Java Servlet to retrieve the XML file content
You may have to use an XML parser (J AXP, for example). If you are hand coding
using J AXP, the steps to retrieve the XML file content may be as follows:
Step 1: Get the XML content based on the URL above in section 5.c.
You need to open a URL connection to get the file you want. To create a
URL connection:
URL ur l = new URL( ur l St r i ng) ;
URLConnect i on ur l Connect i on = ur l . openConnect i on( ) ;
ur l Connect i on. set Al l owUser I nt er act i on( f al se) ;
I nput St r eamur l St r eam= ur l . openSt r eam( ) ;
/ / r ead cont ent
Step 2: Parse the XML file using an XML parser
Any XML parser can be used to parse the XML file. You can use methods
like get NodeName( ) to access these elements.
7. Step 8: Use the Java Servlet to process the XML data

As you parse the data, you will build an output string, converting the XML data
into J SON format, as described in section 3.

Finally you will return the J SON as a single string to the calling J avaScript
program.

The J ava Servlet should handle exceptions such as MalformedURLException
and IOException.

5. Prerequisites

This homework requires the use of the following components:
1. A servlet-based web server, Tomcat 4.1.27. Instructions on how to load Tomcat
4.1.27 can be found here: http://www-
9
scf.usc.edu/~csci571/2006Spring/tomcatinstall.html. A tar version of Tomcat
4.1.27 can be found here: http://www-scf.usc.edu/~csci571/download/jakarta-
tomcat-4.1.27.tar.
2. The J ava Servlet library, which has functionality similar to Perls LWP library, to
perform HTTP transactions using methods such as doGet ( ) or doPost ( ) from
J ava.
3. A J ava XML parser library. You may use the J DOM 1.0, an object model that
uses XML parsers to build documents, available in the Download section of the
class website. Additional information on J DOM is available at
http://www.jdom.org/. You may also use J AXP, the J ava API for XML Parsing,
version 1.1, included in the J ava J DK 1.4 (import javax.xml.parsers.*) and
documented at: http://java.sun.com/xml/jaxp/dist/1.1/docs/api/. A good tutorial on
J AXP is available at http://www-106.ibm.com/developerworks/xml/library/x-
jaxp1.html.
4. You need to obtain a single Google Maps API key, which is valid for a single
directory on your web server. For example, if your Tomcat port is 8834, you
would sign up for the URL http://csci571.usc.edu:8834/examples, and the key you
get will be good for all URLs in the http://csci571.usc.edu:8834/examples/
directory and its subdirectories. You can sign up for your private Google Maps
API key at http://code.google.com/apis/maps/signup.html.
6. Deployment Structure
To write your own J ava Servlets program using Tomcat 4.1.27, you need to:
1. Successfully install Tomcat 4.1.27 on your machine.
2. Go to $CATALI NA_HOME/ webapps/ exampl es directory.
3. Place the HTML, CSS and J avaScript (. j s) files in the Tomcat ser vl et s
subdirectory.
4. Place your J ava Servlets file (. j ava) in the /WEB_I NF/ cl asses folder. So the
path of your Servlets file is
ht t p: / / ser ver _name: por t / exampl es/ ser vl et / your _ser vl et _name
5. Add appropriate sections to the WEB- I NF/ web. xml file, as in:
<ser vl et >
<ser vl et - name>aj ax_maps</ ser vl et - name>
<di spl ay- name>AJ AX Maps</ di spl ay- name>
<ser vl et - cl ass>AJ AXMaps</ ser vl et - cl ass>
</ ser vl et >
<ser vl et - mappi ng>
<ser vl et - name>aj ax_maps</ ser vl et - name>
<ur l - pat t er n>/ ser vl et / aj ax_maps</ ur l - pat t er n>
</ ser vl et - mappi ng>
6. To avoid UTFDataFormatException during file IO operation, you have to use
J DK 1.3 or later for Tomcat. In the . cshr c file under your home directory, add
the entries:
set env J AVA_HOME / usr / j 2se
10
set env PATH / usr / j 2se/ bi n: ${PATH}
7. Before you issue a request to your J ava Servlet file, you need to compile it. You
might need a J ava Servlet class to compile your code, so open the .cshrc file,
and add /home/scf-22/csci571/servlet_classfiles/j2ee.jar to your
CLASSPATH variable.
8. Then run sour ce . cshr c and restart your Tomcat server.
7. Material You Need to Submit
On your course homework page, your link for this homework should go to a page that
includes your J avaScript/HTML program (a page similar to the one depicted in the
picture in section 3). You should submit all source code files including HTML (.html),
Cascading Style Sheets (.CSS), J avaScript (.js), J ava Servlets (.java) and a README file
electronically to the csci571 account so that it can be graded and compared to all other
students' code via the MOSS code comparison tool.
8. Extra Credit
Extra credit will be given any one of two items is implemented:
1. Google Maps street view. Search for street view in the demo gallery at:
http://code.google.com/apis/maps/documentation/demogallery.html
2. Local Stations listings. Instead of showing the listing for the East coast stations
(the default in HW #6), show the listings for the 90089 ZIP code, Cable, Time
Warner Hollywood/Wilshire Digital. Implementing this item will require
changes in your Perl program.
There will be NO HELP provided by the TAs and in the newsgroup for the optional
extra credit items.
11