How to Print Google Maps
Posted: November 7th, 2011 | Author: Julia | Filed under: Tips and Tricks | Tags: google map, print, print document, route | No Comments »Thanking Google Maps service you can add any map to your website easily. And what about printing the map? This simple at first sight question proves to be not so easy.
Variant 1:
The javascript for simulation the print button:
-
window.print()
For example,
-
<input type="button" value="Print" onClick="window.print()">
– and you get the possibility to print the whole page.
Unfortunately, that is not always the best solution.
Variant 2:
If you need to print a part of the page – with the google map itself.
I create the separate page (print1.html), which is opened by clicking my ‘print button’ at the parent page:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" >
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-
<title>For print</title>
-
</head>
-
<body>
-
<script language="javascript">
-
var contents = window.opener.document.getElementById("idPrintArea");
-
document.write(contents.innerHTML);
-
window.print();
-
</script>
-
<input type="button" value="Print" onclick="javascript:this.style.display='none';window.print();this.style.display='';" />
-
</body>
-
</html>
Pay attention, that you are going to print the element with id ‘idPrintArea’ with its content (I wrap my map into ‘div’ tag with #idPrintArea).
At the page with the google map I call to my new ‘print’ page:
-
<img src="images/icon_print.png" onclick="window.open('print1.html')" />
Now it works!
Live example1: click here>>
Note (regarding Route Boxer): All above works fine till you do not need to print the driving direction (the dinamically generated content). I found the solution for this case too.
So I applied media=”print” for the new stylesheet (created for output to a printer) and set the style display:none; for all tags which I’d like to keep invisible. As a result I get a page with the only content I need to have (without creating an additional page).
Live example2: click here>>
Leave a Reply