Project 8: Adding Google Maps

Assigned: Thursday, December 3, 2009
Due: Thursday, December 10, 2009 before midnight (due date edited -MCW 12/1)

Setting Up | Description | Requirements | Submission

The goal of this assignment is to enhance the website with Google Maps.

Setting Up

Here are the steps to get started:

1. Create a directory for this project in ~/public_html/cs312/.
2. Copy the files from ~/public_html/cs312/project 7 directory/ into the newly created project 8 directory.
3. Download the discoball.png image from http://www.cs.odu.edu/~mweigle/files/discoball.png into your project 8 directory.
   • An easy way to do this is run wget http://www.cs.odu.edu/~mweigle/files/discoball.png from the Unix prompt.
4. Make sure that the directory and file permissions allow anyone to view the files (and write to the contact-info.txt file).

Description

Recall the scenario: You are in charge of designing a website for Dan's Disco Discs. As the name implies, they specialize in selling disco CDs. The company wants a home page, an inventory page, a disco information page, and a contact page.

The company wants a map displayed on the contact page that shows the store's location and lets users calculate driving directions to the store.

The store's location should be displayed in a map using the Google Maps API version 3. The store's location should be marked with a disco ball image instead of the default Google Maps marker. When the user clicks the marker, the store's hours should be displayed in an info window. You can choose a real address of your own or use:

You should also include a place where the user can enter a starting address and a button that when clicked will display driving directions to the store.

In addition, since this is the final project, you may make any enhancements you'd like to the webpage, including changing the layout, CSS stylings, etc. Remember that any changes you make must still pass both XHTML and CSS validation.

Requirements

• Edit your web pages with a simple text editor (no Word or any other fancy tools allowed).
• Use XHTML 1.0 Transitional. Your pages must pass validation.
• Your CSS must also pass validation.

Contact Page JavaScript

• Add global JavaScript variables for the map, the directions renderer, and the directions service.
• Add the initialize() JavaScript function to initialize the map
  • You'll need to find the latitude and longitude of the address you choose for the store and use it to center the map.
  • Place a marker at the location of the store. The marker's icon should be the discoball.png image you downloaded from
  http://www.cs.odu.edu/~mweigle/files/discoball.png.
  • When the user hovers over the marker, the tooltip should display "Dan's Disco Discs".
  • Add code so that when the user clicks the disco ball marker, an info window opens displaying the store's hours.
  • Add code to setup the DirectionsRenderer object.
• Add a function to display the directions when the user clicks the 'Calculate Route' button.
  • If the directions cannot be displayed, display an alert that gives the reason (Hint: Use the status variable).

Contact Page HTML

• Add the line to load the Google Maps API

• Display the store's new, real location (the address should also be changed on index.html).
• Let the user know that they can click on the disco ball image to see the store's hours.
• Add a <div> section where the map will be displayed.
• Add a <div> section where the driving directions will be displayed.
• Add a form that allows the user to type in a starting address. The form should also contain a 'Calculate Route' button that when clicked calls the JavaScript calculateRoute() function described above.

Example

Here's an example showing the disco ball icon marker and part of the driving directions:

Submission

Go to the Project 8 Submission page, and enter your name and the URL of your webpage.

• Make sure that the URL works and has been validated before you submit it.
• Only submit your URL once!