About design and nearby

How to Print Google Maps

Posted: November 7th, 2011 | Author: | Filed under: Tips and Tricks | Tags: , , , | 1 Comment »

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:

  1. window.print()

For example,

  1. <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:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3.  <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5.         <title>For print</title>
  6.  </head>
  7.  <body>
  8.   <script language="javascript">        
  9.          var contents = window.opener.document.getElementById("idPrintArea");            
  10.          document.write(contents.innerHTML);
  11.          window.print();        
  12.   </script>  
  13.   <input type="button" value="Print" onclick="javascript:this.style.display='none';window.print();this.style.display='';" />
  14.  </body>
  15. </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:

  1. <img src="images/icon_print.png" onclick="window.open('print1.html')" />

Now it works!

Live example1: check the example 1 >>

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: check the example 2 >>

You could be interested to read about Responsive Google Map also.

Share Button

Check Related Posts:

One Comment on “How to Print Google Maps”

  1. 1 kovest said at 2:01 am on March 11th, 2016:
    Reply  |  Quote

    Will you please provide the code sample for Live example2 to print the map with markers and paths. I tried to print it with adding @media print for css but the map is print without the paths and markers.

Leave a Reply

  • seven − = 2

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now