Geolocation and Google Maps

Assignment 2 — Web Architecture Fall 2010

Assigned: Thursday, September 23rd, 2010
Due: Wednesday, October 6th, 2010


The goal of this assignment is to create and embed a map in your homepage that shows your current location, and create and embed a map that shows your Flickr photo stream. For this, you will use the Google Maps API.


Part A

  1. Read about the Geolocation API in HTML 5.
  2. Using the a2part1.html file template, create a Web page like below Web page which shows your location on a Google Maps.
Show Geo Location

Part B

  1. Read about the Google Maps JavaScript API V3.
  2. Flickr: If you are new to Flickr, create an account by registering for it; else login to your account.
  3. Upload images for geotagging — Upload at least three images
    • of your main building on campus
    • your house (or something in the vicinity)
    • your favorite restaurant or place in Berkeley

    Keep in mind that you will be sharing these images publicly. [On the image's page, in the Additional Information section, you should see Anyone can see this photo]

  4. Geotagging: Geotag these images by placing them on map. Preferably, choose a high zoom level, so that you can precisely place the image on the right location.
    • Make sure that the Location/Geo Privacy setting is visible to 'Anyone'. This is important, else the image will not show on the public feed.
    • You can set the default Geo Privacy setting to Anyone, which will make all your future image geotags public.
    • To confirm if a specific image has the correct location setting, you can go the Organizer and click on the image. This will bring up a settings page, click the Location tab and select Anyone for the question: Who can see where this photo was taken?.
  5. Public Feed: Go back to your Photostream page. Click the GeoFeed link at the bottom of the page. You should see all your public images on this page.
  6. Create another Web page a2part2.html like below Web page which shows this photostream on a Google map.
Show Geo Location

Once complete, please send links to the both pages to

Extra Credit:

For extra credit, complete the above, then create a second version of the above two pages where maps are displayed full screen — covering the entire width and height of the screen.Once complete and valid, please send links to the all the pages (Standard and Extra) to


Supplementary Material

Creative Commons License Please send comments to
Last modification: Tuesday, 21-Dec-2010 03:22:55 CET
valid CSS! valid XHTML 1.0!