Print button for Google Map API

You can easily print google map from maps.google.com. But what about printing the map from gmap api you use on your own website? One way is to print the whole page which is not a good idea. Users want to print only the location of your business in a larger size for later purposes. Google map api does not provide any function to print the map or view it in printer friendly mode.

The only solution I found is using a simple javascript code for this purpose. At first place an image/text/button anywhere (obviously easily available to visitors) on the page that contains your map api. I prefer to use a small printer icon image. Apply onclick(inline or unobtrusive) event to the button to popup a page say print.html.

<img src="images/print.png" class="print" alt="print" title="print" onclick="window.open('print.html')" />

Now create an empty html document, name it print.html and put it in the root folder of your site. Place this simple javascript code inside body tag of print.html 

<script language="javascript">
var contents = window.opener.document.getElementById("map_container");
document.write(contents.innerHTML);
window.print();
</script>

Replace the “map_container” with the #id you are using for your map container. That’s all, you are done!

This method is good enough for printing static google map layout. But you can not print driving direction as that line is drawn using canvas element. In fact you can not print the exact driving direction even from maps.google.com.

This is more or less a better solution for printing the map from your own website’s gmap api. Please lemme know if you know any smarter way to do it.

Related posts:

  1. A pair of printer driver updates released by Apple
  2. SEO tips: Reduce your unwanted external links using jQuery
  3. How to get currently logged on windows username in PHP and Javascript

12 Comments to “Print button for Google Map API”

  1. kree 14 October 2009 at 4:57 pm #

    I searched for a post like this. It’s helped me, thanks very much – but I have a problem. If I draw polylines to the map it won’t be printed. Could you help me?

  2. adnan 17 October 2009 at 7:29 am #

    Sorry @kree, you can not get the lines in this way, cos the lines are drawn on canvas object via javascript and when you simply get the inner html you won’t get the canvas drawings.
    To do this you have to print the map directly from google map site.

  3. kree 17 October 2009 at 1:14 pm #

    Thanks @adnan. I have to search another way then…

  4. prisme 6 November 2009 at 8:14 pm #

    Seems that the Static maps API provides a simpler way to get a printable image :

    http://code.google.com/intl/fr/apis/maps/documentation/staticmaps/

  5. adnan 21 November 2009 at 12:51 am #

    Thank you @prisme for the info.

  6. Markgt 17 December 2009 at 3:57 pm #

    That worked perfectly – thanks so much! been looking for a while for a way to do this
    thanks for sharing :)

  7. adnan 17 December 2009 at 4:48 pm #

    you are most welcome @Markgt

  8. Fred 13 August 2010 at 5:58 pm #

    Your example works fine! Thanks for that!
    But I have a problem with directions:
    If my map shows a direction path from on destination to another and you do not (!) use firefox then the path is a object and all works fine.
    But if you use firefox then the direction path is a object and the path is not showing up in the popup window.
    I read on google groups:
    “SVG Web does not support using innerHTML to load SVG files.”
    Is there any work-around?
    Thanks for your help!

  9. Fred 13 August 2010 at 6:01 pm #

    Some informations in my last post aren’t working. so I try again:

    Your example works fine! Thanks for that!
    But I have a problem with directions:
    If my map shows a direction path from on destination to another and you do not (!) use firefox then the path is a “img”-object and all works fine.
    But if you use firefox then the direction path is a “svg”-”path”-object and the path is not showing up in the popup window.
    I read on google groups:
    “SVG Web does not support using innerHTML to load SVG files.”
    Is there any work-around?
    Thanks for your help!

  10. adnan 13 August 2010 at 6:22 pm #

    @Fred, I’m not sure how to do that. There is a print button on http://maps.google.com/ and you can print directions from there, but no way if you are printing it from your custom gmap api code.

    I’d like to know too. Please share with me if you get any solution.

    Thanks :)

  11. Fred 13 August 2010 at 10:53 pm #

    Hey adnan,

    i changed your code
    document.write(contents.innerHTML);
    to
    document.getElementById(“googleprint”).appendChild(contents);

    now the svg path shows up correctly.
    but the map disapears in the ‘original’ window.

    any idea why?

  12. Fred 13 August 2010 at 10:58 pm #

    okay… i stopped thinking… ;-)

    var contents = window.opener.document.getElementById(“googlemap”).cloneNode(true);
    document.getElementById(“googleprint”).appendChild(contents);


Leave a Reply