HOW-TO: Make your own annotated multimedia Google map

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.

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 example 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:

• 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 points:

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 here.

• — 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.

• — Replace with your own title for this waypoint.

• 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:

http://maps.google.com/?loc=http://yourhost.com/path/to/your/files/yourmap.xml

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.

Going further

This is just the tip of the iceberg of what can be done with hacking Google maps. Work up a script to import and convert your GPS data automagically from the output of your GPS. If you're handy with javascript, you can add all sorts 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!