Using a Google Maps Gadget in Google Sites

I’m working on a Google Site for a group I belong to, and it’s been an uneven experience. The user experience for general editing is quite good, but things get very hairy very quickly when you try to insert “gadgets” onto the page. I assumed that adding, for example, a Google Map to a page would be trivial, but working with the official Map Gadget was frustrating as there was no help documentation on how to populate the “data source URL” field.

I finally dug deep enough to turn up the answer. The Google Map gadget was intended to work with Google Spreadsheets. To get a map on your Google Site showing your map content, here’s what you do:

  1. Create a spreadsheet in Google Docs.
  2. In the first column of the spreadsheet, type in the address as you would search for it in Google Maps. Full street addresses seem to work quite reliably.
  3. In the second column, enter some text that describes the item–this becomes the tooltip for the marker on the map. Repeat for as many items as you like, making sure not to skip rows.
  4. For debugging, I like to add a Map Gadget to the spreadsheet to check my data. Tell it to use Sheet!A1:B10 (or however many rows you have) and to use the last column for tooltips, then Apply and Close.
  5. Verify that the map looks right, then click the map so the title bar is showing, click the little menu in the upper right hand corner of the gadget, and choose Get Query Data Source URL. Choose Entire Sheet and select and copy the resulting URL to the clipboard.
  6. In your Google Site, edit the page you want to put the map on.
  7. Insert a map gadget into the page using the Gadget browser. Fill in the fields, pasting the URL you copied in step 5 into the Data Source URL field, and checking the option to use the last column for tooltips.
  8. Save your changes to the page and behold: a map with markers for all your attractions.

This gives you a pretty basic map view with control over the markers, the height and width of the displayed map, and tooltips. For more advanced map control (street view vs. satellite, zoom level, etc.) I think you’d have to embed raw calls to the API, but I’d be thrilled to be proven wrong.

Adding Wikipedia articles to Google Maps

Google started baking some mashups into the main Google Maps interface earlier this week. As a Wikipedia editor, the one that intrigued me was the ability to hover over a feature on a map and click through to a related Wikipedia article. The question I had was, how do I change my article so that it appears on the map?

Fortunately, it appears to be a pretty simple process, with only one complicated bit, the first one:

  1. Find the place. That is, the place that the article is about. Google Maps is of course your friend here. Once you’ve found the location, double-click to center it in your browser.
  2. Get the coordinates.  This actually isn’t as hard as you might think, thanks (again) to Google Maps. The article Obtaining geographic coordinates provides some helpful suggestions, with a special section on Google Maps. I particularly like the bookmarklet provided, because it makes the workflow so simple–find the place as above, then use the bookmarklet to get the coordinates already in a template. Whatever your method, you’ll want to use the appropriate precision.
  3. Add the appropriate template to the article. There are a few different templates that add geographic coordinates to an article, and some Infobox templates (including Template: Infobox University) include a coordinate parameter. But if you use the bookmarklet I mentioned above, you get the coordinates handed to you in a coord template, which is the one you want to use for compatibility with Google. The only change I’d make is to add the display=title parameter, which floats the coordinates up to the top of the page.
  4. Set the template options. The two I recommend are display=title and type= the appropriate value; for a building, use landmark. This is important because it sets the zoom to the appropriate value.
  5. Preview, making sure to click through and check the map link, then publish.

As an example, I added coordinates to the article about the School of Engineering and Applied Science. Now the next question will be: how long does it take those coordinates to percolate over to Google Maps? I suppose we’ll find out.