UPDATE! These instructions no longer work, but I’ve found a new way to create the huge image, which is a bit easier! See here.
My wife Cassie wanted a big map of Los Angeles on the wall in the study, so she could plan where her next sessions of filming for the documentary should be. So we looked around for large maps, but it was very hard to find one that fit the bill, and that wasn’t over a hundred dollars. Cheapo husband to the rescue!
I looked around and found this useful tip. Basically it’s a way of getting Google Maps to provide you with a big image of the map area you want, at print resolution, which you then print over multiple pages of regular paper. It uses a combination of simple HTML trickery, browser extensions and free software, not to mention the office colour printer and paper cutter.
Here’s the step by step. It looks like a lot, but they’re mostly small simple steps.
- Go to Google Maps.
- Switch to the Classic version by clicking on the ‘Help & Feedback’ button at top right, then clicking ‘Return to classic Google Maps’. This is because in the new Google Maps you can’t grab the HTML link as described below.
- Find the location you want a map of. Use search, or drag the map around.
- Click the ‘Link’ button in the top left (looks like a chain link).
- Select and copy the code under ‘Paste HTML to embed in website’. This is the HTML code you need.
- Paste the HTML code you just copied into a text editor and save it as an HTML file.
- Figure out how high and wide in pixels you want the final image to be. Bear in mind the size of paper you’ll be using, and use a minimum of 150dpi. So in my case, I wanted a grid of 11″x17″ pages, in portrait mode, 4 wide and 2 high. 4 wide * 11″ * 150dpi = 6600. 2 high * 17″ * 150dpi = 5100. So the desired image size is 6600×5100 pixels. Quite large!
- Edit the code where it says “<iframe width=”425” height=”350”…” so that the width and height match the pixel dimensions you want. In my case, is was “width=”6600” height=”5100””.
- You need a way to grab a whole webpage, including the bits you would have to scroll down or scroll right to see. For this, I used a Chrome extension called Awesome Screenshot. It works great, except it only works on web pages on the web. This means I couldn’t just open the edited HTML file locally in the browser. I had to upload it to my website.
- Open the new map HTML file. Here’s mine – feel free to use it if you want a 6600×5100 map image.
- Find the area of the map you want to print using the zoom buttons, and by scrolling around. This is tricky because the map will run off the screen, so you need to scroll to see it all. In addition, there’s a lot of data being pulled down to fill in the map, so each time you move it has to refresh which can take a while. You could also use the browser zoom function.
- Click on the Awesome Screenshot button once you have the map you want. Click ‘Capture Entire Page’. Let it do its thing. (Make sure you grab the map at 100% zoom if you used the browser zoom function.)
- Click on the ‘Done’ button at the top when its finished. You have the option to add annotations here, but we don’t need any.
- Save the image as a file by clicking the relevant button on the right. You now have a big map image.
- Check your image by opening it up. You may want to go back and adjust the area you grab in the map. Once you’re happy, move on to the next step.
- Using the FOSS software PosteRazor, take the huge image and slice it up into a multi-page PDF document. I chose a grid of portrait tabloid (11″x”17″) pages 4 wide by 2 high. The options are pretty straightforward.
- Print the PDF on 11″x17″ paper.
- Use a paper cutter to trim the borders off some of the sheets. Leave some borders on to provide a convenient overlap when assembling.
- Buy a $14.99 folding presentation board from Office Depot, like this one. This was big enough to fit the assembled map with a couple of inches to spare all the way round.
- Stick your map to the board using invisible tape (or glue, or whatever). Make sure you get the edges to line up as best you can. It may not be perfect, but you can get pretty close if you go slowly and methodically. I laid it out on the dining room table, and with the help of some tins of tuna as weights, we carefully went sheet-by-sheet until the thing was assembled. Then the whole was taped to the board.
- Finished! Get your map pins and get pinning. I should probably post a photograph.
So there’s quite a bit of work here, but it’s a lot cheaper than a fancy laminated map, and you can stick pins into it!
26 responses to “Printing a big map from Google Maps for cheap”
Great post! I have a couple of things to add based on my experience at trying this out:
I don’t have a place on the web to load the map as in your Step 9. But with Firefox I was able to load it from a local file and use Fireshot as the capture tool. I don’t know why Chrome wouldn’t work with the same extension. The Fireshot extension seems to behave differently in the two browsers — it even has a different look and menu.
I wanted to control the zoom level to get more exactly the map area I wanted to print. In the html there is a “z” attribute — look for something like this: …..z=15&output=embed…..
The “15” is the zoom level — you can go all the way to 1 for the outer-space view or 20 will give you a view of just a neighborhood. 15 was good for mapping a medium sized city. This really gave me an additional knob to create exact the map I wanted. (Don’t try decimals though – doesn’t work — whole numbers only!).
Thanks again!
Hi all, can anybody help me with this please.
I’m following this instructions but when I try to open my new map (my html file – step 10) it opens it’s text, not the map. Can you please advise me is going wrong. Thank you
Right click on the file=>open with: select your browser
Hope you saved the ‘code’ into html…
Thank you, I’ve tried it – same thing, it opens the text. Any other idea, please?
I saved the text in Word (Mac) as .htm file (there is no option to save as .html) the tried to open in my browser (Chrome) and it opens as text
Thanks for the extra info, Mark. Very useful!
Thanks a lot for the tips.
🙂
Any way to do this now that classic maps is not an option?
Never mind. they moved it to the bottom right as a ? mark.
I was just about to reply and tell you that! Hope this works out for you.
I don’t see it. I am using Firefox
Dude. In one word. U R A M A Z I N G !!! U changed engineer’s life!!!!
Hi Matthew, thanks for a great post. One question Awesome Screenshot does not allow me to click ‘Capture Entire Page’, only ‘Capture Visible Page’. This is only the case with Google Maps, all other websites work fine when it comes to ‘Capture Entire Page’. Any thoughts?
Hmm, I don’t know. Is it perhaps a thing with the new Google Maps vs old?
I was able to find another extension called “full page screen capture.” It worked just fine.
Hi Matthew. Thats a great tip!
I have a couple of question for you:
1 – Do you know what the copyright implication are for personal or commercial use? We print maps on a commercial scale for clients (link below) and sometime this would suit what they need. Although we would not want to break any copyright laws.
2 – Is there a way to export or save the map file without tiling it on letter or A4?
Thanks again for this useful process.
http://biglitho.co.uk/products-services/map-printing/
I have no idea about commercial implications – I would certainly advise against using this in your business!
I know this is a basic question, but I need the “for dummies” version here: What is a text editor (Step #6)? do you mean pages or word? or something online?
Word and Pages are word processors, for writing nicely formatted documents. A text editor just edits raw text. Notepad on Windows and Text Edit on OSX are the defaults, but there are many out there with great features for writing code.
Do you have windows? If yes, go to accessories and select notepad. That’ll work for you. Then paste. When the html code is pasted in notepad, file and save as. When you save the document save it as its name like “map” .html. So “map.html”. Then you should be good to go to the next step.
May I know where is the Awesome Screenshot Button?
Thanks a lot for this post Matthew! It’s been very useful so far except for the fact that google decided to launch it’s “new” maps and it’s unfortunately turning this posts instructions a little bit obsolete. One of the things that changed was the “embed code” that maps show these days. For some strange reason it doesn’t show the horizontal scrollbat nor the zoom controls whenever the width exceeds the screen width. This obviously prevents Awesome screen capture to do its job properly. The web page where you posted your map still has the old embed code which show this scroll bar properly… could you please share it with us? It’ll be extremely helpful for those of us who have no knowledge of html. Thanks a lot!
Webkit HTML to PDF (and other image formats) is a great tool for grabbing the big map to an image file.
http://wkhtmltopdf.org
great idea
Hello everyone, I just wanted to tell you that I’ve found a better and easier way to do this. I’m writing a new post now that describes the new steps. I’ll post a link here soon.
[…] is a followup from this post back in August 2013. The instructions described there no longer work, but this new way is easier and uses an […]
The new post is up here: http://matthewpetty.com/2015/08/printing-a-big-map-from-openstreetmap-for-cheap/