Codelab: Using Alternate Data Sources with the Google Maps API

Goal

This codelab will expose you to various alternative techniques for overlaying data and layers on top of a Google map, such as Google Spreadsheets feeds, GeoRSS feeds, Tile Layers based on SHP data, Ground Overlays, and Tile Layers based on image data. You can either create one map to use throughout the whole codelab, or a separate map for each technique.

Time to Complete

Prerequisites

Before you begin this codelab you must have the following:

• Access to a server (or a free hosting service like Google Pages)
• A basic knowledge of HTML
• A basic knowledge of JavaScript
• A basic understanding of the GeoRSS format
• A basic understanding of the SHP format

Index

This codelab is divided into the following sections:

• Preparing
• Displaying Google Spreadsheets Feeds
• Displaying GeoRSS Feeds
• Overlaying Image Data
• Overlaying SHP Data

1. If using Mozilla Firefox 2 for this codelab (strongly recommended), download two useful debugging extensions for Firefox: Web Developer Toolbar and Firebug.
2. If you're unfamiliar with Firebug or the Web Developer toolbar, check out this tutorial for Firebug and this series of screencasts about debugging the Maps API with tools.

1. Create a Google Spreadsheet with atleast 3 rows of data about locations (name, description, latitude, longitude). Publish the feed. Using the Spreadsheets Map Wizard, create a map reading in that feed.

   Blog Post: Creating Dynamic Client-side Maps Mashups with Google Spreadsheets

2. Add a column to the spreadsheet for 'rank' and give each location a value between 1 and 10, and another column for 'color' and give each location a hexadecimal value. Re-publish the feed, and use these new columns to decide the size and color of the icon for that marker.

   Blog Post: MapIconMaker 1.0: The Easy Way to Make Your Markers Meaningful, Demo Gallery: GIcon examples, Class Reference: GIcon

3. Create a form for the spreadsheet to let people enter in additional rows of data to your spreadsheet without having to share it with them.

   Blog Post: Stop sharing spreadsheets, start collecting information

5. Modify the HTML for the form to include a geocoder so that people can just enter an address and have the latitude/longitude information automatically populated.

   Blog post: http://googlemapsapi.blogspot.com/2008/02/creating-user-contributed-map-look-ma.html

1. Create a map that uses the Google AJAX Feeds API to parse a GeoRSS feed from Flickr for all photos containing the tag "cheese" and displays the results as marker on the maps. When the markers are clicked, an info window should pop up with the photo in it.

   A Cool AJAX Feeds and Maps Mashup

2. Modify the map so that each marker uses a photo thumbnail as the icon.

1. Search Google for "historical maps" for your favorite city (e.g. Boston, San Francisco). Find a map that's oriented to North and mostly to scale. Create a map that overlays the historical map image as a GGroundOverlay.

   Google Image Search, GroundOverlay Sizer, Class Reference: GGroundOverlay

2. Now, use the same map or find a new map that's not oriented to North. Download that image to your hard drive. Use the Map Rectifier from MetaCarta Labs to align and distort the map image as needed. Overlay the historical map ontop of a map as a Custom GMapType using the WMS URL from the Rectifier.

   Map Rectifier Adding Your Own WMS Layers to a Google Map

1. Search Google or the ESRI site for SHP data that you'd like to overlay on a map. Make sure it comes with a .prj file, or that you're able to create one for it.

   ESRI Tiger Download, Mass GIS Data

2. Download the GMapCreator from MapTube. Use it to create a custom map of the SHP data.

   MapTube Signup + Download