Print google map with directions on it

Question

I've got google map on my webapp - working with the JavaScript API V3. I give my users the ability to manage some routes, using the google map directions. Now, my problem is that I want to give them the ability to print it (just the map, not the entire website).

I've tried the following:

var OpenWindow = window.open("_blank", "", '');
var contents = document.getElementById("mapMainCanvas");
OpenWindow.document.write(contents.innerHTML);

This indeed open a new tab with the map, but without the directions. Also, I couldn't find any "print" option in the API. Does anybody solved this problem?

Thanks.

Answer 1

Try this:

var content = document.getElementByID('mapMainCanvas'); //has to be first.
var win = window.open();
win.document.write(content);
win.print();
win.close();

I hope it will work!

(Please let me know if it does or not.)

Answer 2

Could you create a print stylesheet and use a CSS to make it only print out the map, by hiding everything else? You may need to fiddle with classes using jQuery/other if you want users to be able to print that page normally.

Instructions on starting with print stylesheets can be found here: http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/