Geolocation and Google Maps

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.

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.

Once complete, please send links to the both pages to prateekk@ischool.berkeley.edu.

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 prateekk@ischool.berkeley.edu.

Supplementary Material

• HTML/CSS: W3Schools and Head First HTML with CSS, XHTML
• APIs: Application programming interface Wikipedia entry and How to Leverage an API for Conferencing
• JavaScript: Head First JavaScript