HOW-TO: Make your own annotated multimedia Google map

location based services

One of the great things about Google maps is it has its roots in XML. To translate for the non-web developers out there, it basically means Google maps are user hackable. This how-to will show you how to make your own annotated Google map from your own GPS data. Plus, you'll be able to tie in images and video to create an interactive multimedia map. We'll walk you through the steps we took to generate an annotated map of a walk we took recently through our hometown, now that it's actually starting to get warm enough to want to walk about!
Background
I saw this post by Jon Udell, in which he does a screencast of an annotated walking tour through Keene, NH. Screencast goodness aside, I wanted to figure out how he made the map and how to simplify the process so that the non-web geek could attempt it without too much trouble. The geekiest bit will be where we edit our XML file, but you can essentially think of it just like editing a plain old text file — it looks like garbledy-gook, but it’s not actually rocket science. If you’re new to web development or new to XML, don’t worry — we’ll walk you through it as best we can. Ready? Let’s dive in!
Materials
GPS device. Though, technically, you can even do without this if you don’t have one — unless you’re travelling off the beaten path, you can use Geocode.com to convert the nearest street address to latitude and longitude data.
Digital camera, if you wish to capture media for your map.
Computer of any flavor that will run Firefox.
A place to store your files online; we’ll talk more about this later. If you have access to a web server, you’re all set. Otherwise, we’ll give some suggestions about free hosting options.
The Firefox browser.
The Greasemonkey Firefox plug-in
The Google maps user annotation script.
Text editor to edit your XML file; plenty of free options across operating systems. We use the free TextWrangler on our Mac, and jEdit on our Windows PC.
Getting started
Before we get in to how it’s done, let’s look at the results. Fire up Firefox and install the Greasemonkey Firefox plug-in that allows you to inject some dynamic behavior into viewed web pages; you’ll have to restart Firefox for it to take effect. Relaunch Firefox, and install the Google maps user annotation script by simply clicking right-clicking on the link (CTRL-click for one-button mouse Mac users) in this sentence and choosing “Install user scripts…” Then, load up the URL of our annotated Ithaca map in a new tab so you can switch back to this how-to easily. Click on the “Display Points” link, and you’ll zoom in to our annotated Ithaca walk.