health care, road trips, tech talk, occasional rant

fun with google maps

For the last couple of years I have put many hours into a project connecting my pictures with my blog posts with maps of the places about which I was writing and snapping photos. So… for the last couple of years I have been trying to keep up with the wonderful world of Google, and particularly Google Maps. This is a short history of what I’ve learned, what’s changed and the pretty darned cool setup I have going now.


Some simple things to start with:

  1. To do any of this you need a google account. If you have a gmail account, that’s it, you’re in! If not, you should get one.
  2. Things change! I wrote a version of this page eight months ago, which became completely obsolete when Google discontinued the RSS feed from their maps. I have no doubt that parts of this will be obsolete by the time I publish it. Annoying, but that’s life on the cutting edge, haha.
  3. To do the things below you don’t even need a Developer ID! That is a very long character string you need to embed in certain Google API calls so they can validate the requester of that information. The method described below involves some tedious repetitive importing and exporting, but the end result is that I am simply asking for the contents of my own Google Documents files, which google has designed to be a user-level operation, so no developer-y queries are needed!

My Maps

At the user level, you should know about the My Maps feature(*). If you are logged into your google account and looking at the basic Google Maps page, you should see a link next to Get Directions called My Places. Click there for a wonderful world of DIY fun … if you are a map geek.

(*) Sometime in the last month (May 2011) this has been re-labeled My Places, sigh, and now includes everything in your Maps “footprint” – business reviews you may have submitted on a map, etc.

Many modern GPS devices allow you to do cool stuff like upload your bike ride as a google map, so maybe you’re on top of this already.

I create my maps the old-fashioned way. I manually enter Placemarks and Lines for respectively, the places I visit and the routes I take to get there. It’s all great fun. This is how I create the raw material for what happens below. Here is one of those maps. To cut to the chase, here is that same map massaged through the process below. Notice that all the cute icons I laboriously added to the base map have been lost in translation, but that’s ok, I could put them back if I really wanted to. And even better, I could do it in a systematic way for all my maps with some combination of Fusion settings, CSS and Javascript.


Sometime maybe four months ago I noticed that all my maps were broken, in an extremely ugly and final fashion. oh que lastima! When I had time to investigate I found that the option for an RSS feed had been removed by Google. Over time I moved far enough through the stages of grief over this to start looking at KML, which is the preferred method of capturing a map in a file. KML is just another variant of XML structurally quite similar to RSS when you get into the details. I already have a bag of tricks for reading XML from either Javascript or PHP, so I started feeling better about the whole thing.

Google Fusion

Further searching turned up references to something called Fusion – Google Fusion to be precise. As of this writing it is still an under development feature. My take on it is that it’s an attempt to bring map creation and management into the spreadsheet metaphor, to make it easier for anybody with spatial data to make a map without taking a computer cartography class. I’m sure it will turn out to have other uses and maybe it’s different in the minds of its creators, but that’s what it means to me.

Its first useful feature is that you can import a Google Maps KML file into rows in a Fusion table. It populates columns for name, description, and geometry – corresponding to the two text fields in a Placemark or Line, plus their location.

Fusion to spreadsheet

The Fusion spreadsheet interface is not particularly usable, so I quickly decided that it was easier to export this bare-bones sheet into a more friendly application to do work. I’m sure Google would wish that their Documents was the first spreadsheet I thought of, but it’s not really there yet for me on the usability front, so I export as CSV and import into Numbers on my laptop.

The second useful feature of Fusion is that it allows you to customize the balloon (called the info window in Fusion) that shows up when you click on a line or marker. Sadly, there is only one template for both, but still it’s a really neat feature. Column values from the Fusion table are substituted with {name} and {description}, and you are welcome to add your own columns and substitute them also. That’s why we’re back in real spreadsheet app, to more easily create and populate these new columns.

back to Fusion

Export CVS from Numbers, then Import CVS back into Fusion and we’re almost there! I have found that it upsets Fusion to repopulate the same table with a different set of columns than the original, so I create a new table here and delete the original from two sections ago. This is the final table, the one that drives the maps in my application. Set a few things:

  • make it public,
  • choose an icon and
  • a line width and line color
  • and set the balloon template as described above.

Also, I write a new KML file of this final version, for certain esoteric uses within my app. I consider the Numbers file to be my base file. If I want to change things I do it in Numbers, then freshen the rows in the Fusion table via CSV export/import. This way I keep the same Fusion id and don’t lose the settings.

using the Fusion map in my app

First try here was to use the IFRAME snippet Fusion will build for you. But this sucked. It was hard to style, the links in my balloons stayed in the IFRAME, it was all around unsatisfactory.

It turns out setting the map up in Javascript is very easy. You can style the balloon contents to your heart’s content.

wrap it up

There are the steps all in one place:

  1. create a google map using the My Maps feature.  Put in all the points and lines you need, but don’t waste too much time on the annotation – just enough to what point/line this is.  Turns out it’s a lot easier to do this in your spreadsheet app.
  2. Export to KML.  This file is how you export a map to Google Earth.  Google changes the link for how to do this all the time (it seems to me), but that is the link you’re looking for.
  3. Import KML to Google Fusion.  This document is temporary, save the fancy stuff for later.  All you are doing in this step is using Fusion as a platform to …
  4. Export CSV.
  5. If your info windows (balloons) contain useful info, do a quickie massage in your favorite regex editor.  Maps encloses description text in a useless DIV which I don’t like.  I use Textmate to remove it with this bit of regex:
    replace: <div\b[^>]*>(.*?)</div> with: $1
  6. Import CSV into your favorite spreadsheet app.  For my uses, I add two column called date and type.  I use the date of this line/point to link it to the pictures/blog post for that date.  The type is to distinguish points from lines w/o looking at the geometry. I also clean up and flesh out the name and description fields.  This is the base file for the whole thing going forward.
  7. Export CSV.
  8. Import back into Fusion.  This is the final file for usage in my app.  Make it public, set the info window template, and set the line width and color, and icon.  Any content chages are made in the spreadsheet file, and repeat steps 7 and 8.
  9. Note the Fusion id, grab the LAT, LON, CENTER and ZOOM from the KML url in step 2, and show the map in a DIV of your choice in you app using the very simple example Javascript in the Maps documentation.