Portals Mash Up Workshop

Group Activity #1

Creating a Google Map Mash Up using Google Spreadsheets

and the Google Spreadsheets to Maps wizard
Overview: Group members will gather data from various internet sources and organize it
in a shared Google Spreadsheet. Groups will then generate a “mashed up” Google Map
from the spreadsheet using a “spreadsheets to maps” wizard, and publish the map on the
web. The pop up windows for each map point must include one image and one link.

Please Note: while we have tried to make these instructions completely accurate, Google
may have changed a word or step here or there, since Spreadsheets is in “Beta”.

1. The Mash Up Idea:

You will be given a topic for your mash up. Discuss the idea with your group.
Talk about what your map points might be, and where you might get images and links
for your pop up windows.

2. Create & Share Your Google Spreadsheet (appoint one group member to do
this):
a. Sign in to Google Docs (docs.google.com) using your Google account.
b. Click New Spreadsheet, and then click the Share tab on the resulting
page. You are then prompted to name and save your spreadsheet (call it
something like ‘Group 1 Mash Up’).
c. Now in the right-hand window, enter the email addresses of your group
members, and click invite these people (make sure as collaborators is
checked, and the emails are the ones your group members used when
creating a Google account).
d. In the resulting popup window, click send invitation.
e. Group members should then check their email accounts, open the
invitation message to the spreadsheet, and click on the provided link. Once
all group members log in, you all can type directly into the shared
spreadsheet.
3. Design the Spreadsheet:
Before gathering and inserting data, you’ll want to name the columns of your
spreadsheet. This simply involves typing column headings into the appropriate cells
in the first row. Every group should add the columns as shown below (Title, Lat,
Long, linkURL, imageURL, Description). In the example below, the popup windows
will include a title, an image (imageURL), and a link (linkURL). If your group is
feeling bold and wants to enter other kinds of data to your pop ups (addresses,
reviews, etc.), you may create columns for those data values.
 4. Gather the Data:
Decide amongst your group members who will gather what kind of data. For
example, one member might get lat/long coordinates, one might get image URL’s,
etc. Use copy (<ctrl> c) and paste (<ctrl> v) functions to synchronously populate the
spreadsheet with data you find on the internet. Refer to the links page
(http://jeremy2443.googlepages.com/links) for good resources, and/or find resources
on your own.

5. Formatting the Description Column: The pop up windows for your maps will
use whatever data is stored in the Description column. Ideally, this will include
data stored in other table cells (values for Title, linkURL, and imageURL), with
some HTML. The values for the Description cells should look something like
this:

<img src="http://farm1.static.flickr.com/162/413037618_2bbb55d17b_s.jpg"/><br>
<a href="http://www.oregonstateparks.org/park_144.php">Tryon Creek State Park</a>

...where the URL in the <img> tag is value of imageURL, the URL in the <a> tag is
the value of linkURL, and the text between the opening and closing <a> tags is from
Title.

You can complete your Description column values using one of two methods:
• Copy and paste data from other cells, and type the HTML elements around the
values. If you choose this method, it may be easiest to use Notepad as a place
to assemble your data, and then copy the end product, and paste it into a
Description cell.
• Use the CONCATENATE function to merge text and cell values together:

=CONCATENATE("<img src='", E2,"'/><br><a href='", D2,"'>", A2,"</a>")

One nice thing about this method is that once the formula is entered into row 2,
you can copy and paste it into other rows, and the referenced cells will adjust to the
new row (i.e. pasting it in row 3 will adjust the formula to get cells in E3, D3, and
A3).
6. Publish the Group Spreadsheet: When your group is finished gathering data,
it’s time to “publish” the spreadsheet, which will make it available to the Maps
Wizard. One member of your group should do the following:
a. Click the Publish tab at the top-right corner of the spreadsheet, and then
click Publish Now.
b. In the resulting screen, click the more publishing options link.
c. In the resulting window, change the File Format to ATOM, and click
Generate URL.
d. Copy the URL to some text editor, like Notepad (Start→All Programs→
Accessories→Notepad).

7. Run the Maps Wizard:

a. Go to the Maps Wizard at http://gmaps-
samples.googlecode.com/svn/trunk/spreadsheetsmapwizard/makecustomm
ap.htm
b. Follow the instructions in step one to enter the Spreadsheet Key and
Worksheet ID, and then click Load Worksheet Data. Your spreadsheet
should soon appear.
c. In step 2, select the spreadsheet columns that correspond to the appropriate
fields (Title, Latitude, Longitude, Description). You can ignore Rank,
unless you created a Rank column in your spreadsheet. Customize your
map by editing the other fields (size and marker colors), and click Update
Map. Play around with the settings until your group is satisfied with the
map.
d. In step 3 you will generate the code to put in your page your group will
later publish. In the Site URL window, enter the URL given to your group
(it should have this format: http://myGmailPrefix/googlepages.com). Now
click Generate Key. The source code will appear below.
e. Copy the source code, and paste it into a blank screen in Notepad.

8. Publish the Map:

a. Go to Google Page Creator (http://pages.google.com). Click create a new
page, enter a page title, and then click create and edit.
b. You’ll now see a WYSIWYG type web page editor. In the lower right-
hand corner, click edit html.
c. Skip a few lines below anything that might be listed in your screen (like
whatever you entered for the title). Now paste the source code generated
from the map, and click Save Changes.
d. When you return to the WYSIWYG editor, you won’t be able to see the
map. However, if you click Preview, your map should appear. If you’re
satisfied, click Publish, and then View it on the Web. Copy the URL, so
your group can share it with others.