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!
- 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.
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
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.
This map works like any other Google map, except for the fact that we've created it ourselves and added media to it.
You can click on a waypoint to get more information, or generate driving directions to and from points as usual. When
you click on one of our points, you'll notice it will have either a picture or a movie link associated with it:
The best way to follow the map tour is to right-click (CTRL-click Mac) and open the media file in a separate browser
tab, because following a link and clicking the back button will break the script and revert the map back to its default
state, from which you'll have to click the "Display Points" link and start all over again. If you right-click the
"movie" link in the above example, you'll see a 30 second 360-degree video we took from the center of the Ithaca
Commons. If you right-click on the "1 more" link it will open a tab with a Google query ("Ithaca Commons") we've also
linked to — you can add links to any URL on the web, not just your media files. Load up a waypoint with a "picture"
link, right-click on it and you'll see an image we shot at that location.
Now that we've seen what we're about to create, let's get started.
We'll leave the finer details of collecting your media files and waypoints up to you — that's the easy part. Just
gather your GPS and camera and have at it, or take your images and geolocate them later using
Geocode.com if you prefer that method. Similarly, we'll let you handle the editing
and preparation of your images and video files, and start in at the nitty-gritty stage.
You'll need a place to host your media files and the XML file we're going to create that specifies your map data. If
you already have a Flickr account, you can host images there, and if you don't have
one, we highly recommend it as a value-added image hosting service. You can host up to 100 images for free, and link to
them from elsewhere.
To host video, and to host our XML file, you'll need access to a web server that allows you to FTP upload files. If
you already have a web site or a blog that allows you to upload files, you're set - you can upload all media and your
XML there. Otherwise, there are still free web hosting services out there you can use in a pinch for making a few of
these maps. Ye olde Angelfire is still kickin' it as a free service with 20MB of
space. Yes, you have to navigate a minefield of opt-out checkboxes to get there but it takes all of about five minutes
to set up a free account and upload your XML file, which you can safely link to from Google maps without incurring the
evil spector of the sponsored ads (we tested this to be sure!). You could host some images and video there, as well, if
you're only making one or a few maps. Or, ask around and get recommendations of other free web hosts — most are evil,
but if you don't give them any real metadata about yourself you should be able to emerge unscathed.
Now, you've made and uploaded your media files to wherever they may roam. You'll need to know the fully-qualified
URL of any media file you wish to link to, as well as your (coming next) XML file. That's as good a sequeway as any —
let's dive in to the meat of this project: creating our XML file.
If you've seen HTML, XML looks pretty much the same: parameters surrounded by opening and closing tags. We'll show
you an example of how to make two different waypoints, one with an associated image and one with associated video, and
show you the minimal rest of the document structure. You can download the following
waypoints file by right-clicking and saving it to disk, then modifying it to make your own map. It includes one
waypoint with an associated image and one with an associated video, matching the first two stops on our Ithaca map.
Here's what the entire XML file looks like with only one waypoint — all the stuff between the tags
defines the waypoint. The stuff before and after is just the "shell" of the entire document.
You'll want to download the sample file and replace the following parameters to match your own map settings:
- Enter a title for your map here
- Just duplicate the title here
- defines the GPS coordinates the map will center in on when you
click the "Display Points" link - just choose a central waypoint for the area your map covers.
Next, let's zero in on what one waypoint looks like, and what changes you'll need to make for each of your
Here's what you'll need to edit for each waypoint:
- — For ordering and differentiating your waypoints,
change id="A" to correspond alphabetically to the order in which you wish to place your waypoints. The third point
would be id="C" and so on. Note that you can include any number of waypoints on your map, but Google only provides 10
default marker images: A through J.
- — Replace this with the latitude and longitude data generated
from your GPS. Note that for small projects like this it is simpler to track and add these points manually, but if
you're handy with Perl you can auto-generate a lot of this XML from a list of coordinates. More info
- — As with the first bullet point, replace "markerA.png"
with the approproate letter to correspond with your waypoint's order in the map: markerB.png, markerC.png, and so on
— up to J, past which you'll have to make your own markers to link to.
- Tompkins County Public Library — Replace with your own title for
- 101 E. Green St., Ithaca, NY — This defines the address
displayed underneath the title in the popup balloon that results from clicking your waypoint. It is also the basis
for getting driving directions to or from this point, so you can use the nearest real street address if you want to
have this functionality in your map.
- http;//media.weblogsinc.com/common/videos/barb/googlemaps/1library.jpg — this defines the
URL of the image or video file you wish to link to, or any other URL you wish to link to from this waypoint. (note:
replaced : with ; to prevent url autolink in this example)
- picture — this will be the text that gets linked in the popup balloon; picture,
movie, or link will be common terms here.
- http;//www.google.com/search?q=tompkins+county+public+library+ithaca — You can add more
than one URL reference to each waypoint. This second URL is the one that gets linked from the "1 more" link in the
popup balloon. Change it to whatever additional link or file you wish to link to.
- parked here! — This defines the "sub-head" descriptive text you see under the
waypoint title in the right-hand pane of the map.
To add another waypoint to the map, just cut and paste everything starting from the opening tag
until after the end of the closing tag from your first waypoint, then modify the same bits of data as
detailed in the list above for this new waypoint. The entire collection of waypoints lives sandwiched in between the
opening bit of code:
And the closing tiny bit of code:
Still with me? That is the bulk of the magic behind the annotation. When you've finished stringing together all your
waypoints and have nestled them between the opening and closing bits, save the resulting final file as your_map.xml or
similar. Then, upload that XML file to whatever web host you've chosen. After this, you should be able to load up the
following URL in your Greasemonkey-enabled Firefox browser:
Your URL is similar to ours (http://maps.google.com/?loc=
http://media.weblogsinc.com/common/videos/barb/googlemaps/ithaca_walk.xml) but replacing the URL after the "?loc="
with your own XML file. It is the combination of Greasemonkey and the Google maps user annotation script that add this
function to Firefox to feed an external XML file to Google maps — although there are other methods of achieving the
same goal, this way is very simple.
Click the "Display Points" link and Google maps should zoom in to whatever you listed as your center point, as
described above. Then, follow along on your own annotated map tour courtesy of Google maps.
This is just the tip of the iceberg of what can be done with hacking Google maps. Work up a script to import and
of dynamic actions such as panning and following into
your maps. Or, include your custom Google map on your own web
page. You can get your custom maps working in other browsers besides Firefox, as well — we just chose the
Greasemonkey method as being easy enough to do even if you've no experience with XML. For other ideas, try hunting
around in the GoogleMapsHacking wiki.
And of course, don't forget to post a link to your hacked Google map!