TV Listings Google Maps mashup
In this project, I created a web site, which provided visitors the ability to search the current TV listings.
When a user selects a given channel, the script will retrieve its shows and other information (name, time, link, etc.) and display it.
The project used many techniques such as AJAX, JSON, DOM, CGI, and so on.
The web page first connected to a website that contains the information of shows.
Then it invoked a server-side script in Perl that would produce an XML file containing the details of all current channels listed and all their shows.
For each channel, the Yahoo! TV listings website displays a list of shows and the associated time slots.
In addition, it may or may not contain a link to a website where more information can be found about a particular show.
The Perl script would extract the information and produce an XML file.
The XML file is separated into channels. Each channel has a name and contains sequence of shows.
Now we can test it by parsing this XML file and extracting the information we need.
Here is the result :
Now we are ready to display the information on google map.
Once the Google Maps page is displayed and the "Download Listings" button is pressed, the form would call a JavaScript function to start an asynchronous transaction with a Java Servlet running under Tomcat.
The Java Servlet retrieves the current TV listings data by initiating a connection with your Apache server and executing the previous CGI script.
Then Java Servlet extracts the information and transforms it to a JSON file.
Finally, the JavaScript program places the overlays at the appropriate locations on the Los Angeles map.
The result should look like this.
