Project 5: Google Maps API

Assigned: Tuesday, November 18, 2008
Due: Thursday, December 4, 2008 before class

The goal of this assignment is to demonstrate your knowledge of Javascript, XML, and the Google Maps API.

You are to create a webpage that displays two Google Maps. The first map shows places that you've lived and places you've visited. The second map should allow a user to enter places they've lived and visited.

Requirements for Your Map (map 1)

• The list of places you've lived should be stored in an XML file named lived.xml.
• The list of places you've visited should be stored in an XML file named visited.xml.
• The map page and the XML files should be placed in the same directory.
• Use the data in the XML files to load the place markers onto the map.

XML Format
Here are examples of the XML format you should use.

lived.xml

<placesLived>
  <location>
      <city>Norfolk</city>
      <state>VA</state>
      <country>USA</country>
  </location>
</placesLived>

visited.xml

<placesVisited>
  <location>
      <city>Boston</city>
      <state>MA</state>
      <country>USA</country>
  </location>   

  <location>
      <city>Dublin</city>
      <state></state>
      <country>Ireland</country>
  </location>
</placesVisited>

Note that international locations should still contain the <state> tag.

Requirements for Both Maps

• "Lived" places should be indicated with the default red marker.
• "Visited" places should be indicated with the alternate blue marker.
• The map should be automatically zoomed to an appropriate level to show all of the markers, but not so wide that more of the map than needed is shown.
• When each marker is clicked, it should display an info window with the location and whether it is a "lived" or "visited" location.
• Examples are shown below.

Notes

• You may find it helpful to look at some of the Google Maps API documentation, examples, and demos.
• You may format your webpage any way that you wish as long as you fulfill the requirements. For example, you don't have to use buttons to allow the user to indicate "lived" or "visited", but you must allow the user to specify the place type.
• All of the work must be your own. You are not allowed to work in groups on this project. A submission that appears substantially similar to another student's will be considered suspect.

Submission

Go to the Project 5 Submission page?, and enter your name and the URL of your Project 5 page. Make sure that the URL works and is entered correctly before you submit. Only submit your URL once!

Also, print a screenshot of your page showing both maps after you've had someone enter their information on the second map. Submit this in class on the due date.