Shewbox.org

sub specie aeternitatis

How to Print a Giant Google Map

October 11, 2009

goog_small

 

I love maps, especially really huge maps that you see in public places like a metro station or museum.  I wanted one for my place and after some work, printed out a giant map of Tokyo that covers the entirety of one of my walls.  Luckily I have access to the laser printers at IU (and a large enough print quota to print this with plenty left over) since this was 17 pages wide and 10 1/2 pages tall.  This is the view of the entire wall:

full_small

It didn’t work out exactly as I wanted.  Tokyo proper is actually on the bottom 1/3 of the wall, where I wanted it to be center in my planning.  But after printing, cutting and taping the first 2/3 on the wall I figured I’d just live with it vs. starting all over.  My method was a bit of a pain to piece together and there very well may be a much better way to do it (if you know, let me know please!).  So how did I do it? 

First, what area did I want to print?  I thought of a few major metropolitan areas like NYC, but as my wife is from the Tokyo area and I’ve been there several times it seemed the most fun.  Then I had to decide between a street map or a satellite image.  I actually had an even bigger satellite map of Saitama when I was living in Miami and found that having the more traditional map was more fun to look at.  You could always do a hybrid if you wanted the best of both worlds as we’ll see in a minute.

Now I needed a way to view a really large portion of a Google map at a time.  I suppose you could take a screen grab of tiny little squares and piece those together in Photoshop (after all, I had to chop the big image up into smaller ones in the end anyways) but there is an easy way to view a REALLY large chunk of Google maps at a time.  I went to Google maps, went to Tokyo, then clicked on the Link option on the top right corner of the map.  Inside here is some Embed code for directly embedding the Google map into any website. 

embed

Next I opened up notepad and created an html file with the embed code in it.  Since it reads the information directly from Google I didn’t have to put it up on my website, although I certainly could have.  I just loaded it from my hard drive and it worked.  When you first do this, the map is still very small, and that is because within the embed code there are settings for how big the window into Google maps is.  It’s at the very beginning of the code and it’s very self explanatory:  width=”425” height=”350”.  This allows you to tell Google how big of a window, in pixels, you want to display of Google maps on your site.  I wanted about an 8ft x 10ft image so I went into Photoshop and, at least according to Photoshop, I wanted a frame 6912 pixels tall and 8640 pixels wide.  So my new HTML file looked like this:

<html>
<body>

<iframe width="8640" height="6912" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=tokyo+japan&amp;sll=42.044143,-87.686904&amp;sspn=0.007872,0.019805&amp;ie=UTF8&amp;hq=&amp;hnear=T%C5%8Dky%C5%8D+Metropolis,+Japan&amp;ll=35.689488,139.691706&amp;spn=0.017219,0.039611&amp;z=15&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=tokyo+japan&amp;sll=42.044143,-87.686904&amp;sspn=0.007872,0.019805&amp;ie=UTF8&amp;hq=&amp;hnear=T%C5%8Dky%C5%8D+Metropolis,+Japan&amp;ll=35.689488,139.691706&amp;spn=0.017219,0.039611&amp;z=15" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</body>

</html>

At this point if you don’t have a decently fast computer and especially one with plenty of memory, things are going to get really really slow or crash.  Google will happily comply and send you the image data for all the tiles you are requesting and your browser will then display all of those on screen so if your computer is low on memory you can probably forget about it.  Things slowed down on my computer but they didn’t crash, so next I had to adjust the zoom and placement of the image, which works just like the smaller version of Google maps, except that it has to refresh the ENTIRE page if you move the screen even one pixel.  Once I decided on what looked like a good placement and zoom I wanted to save the entire thing.  You can save the entire page if you go to File –> Save Page, but it will save an HTML file with all the little image tiles Google sent your way.  You could, if you were wanting to print hundreds and hundreds of pages, print all these little tiles, cut out the little squares, and piece everything together on your wall.  I wanted full page images both to save paper and my sanity and so I turned to a Firefox addon:

screengrab

There very well may be other screengrab plugins, but my googling found this one first and it worked fine for me.  Once I had the entire image where I wanted it and the screengrab plugin was installed I clicked on the Screengrab icon on the lower right corner of Firefox and selected to Save the entire frame as an image.  Once again, if you are short on memory at this step, Firefox will crash.  The ram usage for Firefox while the plugin was saving the entire frame as an image shot up to well over a gigabyte.  The bigger the image you want, the more ram it requires. 

At this point I went searching for programs that would auto splice and print this giant file.  I first thought I had a match with a program called the Rasterbator.  But it doesn’t allow really fine detail like my map had.  It is better for taking a smaller image and blowing it up the size of your wall, where you don’t need really fine details.  I found another program called Posterizer, but it crashed every time I tried to use it.  So I had to use Photoshop to splice it into all the little pieces.  Luckily Photoshop, being the powerful program it is, has a way to automate this using the Slice Select Tool (btw, I have to add I love that IU has a volume license agreement with Adobe and I get the entire CS4 creative suite free). 

Finally I had 200 separate images (I created an image bigger than I thought I would need, just in case), each sized to fit my paper nicely.  I headed over to campus and printed out all 200 pages and then spent another 30 minutes at the paper cutter slicing the extra borders off the images. 

The final step was to put the giant puzzle together and paste it on the wall.  This was the longest step and actually harder than I thought.  It was surprisingly difficult to make sure everything lined up correctly as I taped all the pieces together.  Get a little off in one direction and then the next layer down you might find that the bottom of the one doesn’t match the top of the next.  I tried taping together larger sections on the floor and then taping those to the wall to be a bit easier although I was still off in a few places. 

Overall, though, I’m really happy with it.  I just wish Tokyo proper was centered like I wanted.  Shibuya is down by my wall socket

shib_small

Tokyo station and the Imperial palace is also near the bottom of the wall

chioyda_small

Oh well.  Next time I’ll get it just right :)

But you know what I really want?  I want the entire wall to display a live version of Google maps.  One that I can grab and zoom in/out, drag around, switch from satellite to map to street view.  A giant wall sized multi-touch screen in other words.   Now THAT would be really cool.