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

7 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


Leave a Reply