© Copyright 2012 ABCoder | 
Google Map API
Print button for Google Map API
On 02, Aug 2009 | 31 Comments | In Google Map API | By abcoder
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.
Join testking 642-515 web development course and learn the different tips and techniques with testking 642-566 videos and testking E20-540 demos to create dynamic web pages.
-
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?
-
Thanks @adnan. I have to search another way then…
-
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/
-
That worked perfectly – thanks so much! been looking for a while for a way to do this
thanks for sharing
-
you are most welcome @Markgt
-
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! -
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! -
@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
-
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?
-
okay… i stopped thinking…
var contents = window.opener.document.getElementById(“googlemap”).cloneNode(true);
document.getElementById(“googleprint”).appendChild(contents); -
why not using
-
a href=”#” onClick=”print(); return false” title=”print hasil survey”
-
I face the same problem. I followed your ideas here and then I found another way to get our maps from Google and put in our formatted web page. This is a small solution:
var contents = window.opener.document.getElementById(‘maparea’).innerHTML;
//—- clean this parameters to control your maps
contents=contents.replace(/position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%/gi,”position: absolute; overflow: hidden; width: 50%; height: 50%”);
contents=contents.replace(/left: 0px; top: 0px;/gi,” “);
//—- end of clean this parameters to control your maps
//
//—- do this if you do not need any controls displayed otherwise do not add unnecessary controls in your maps….
contents=contents.replace(/http:\/\/maps.gstatic.com\/intl\/en_ALL\/mapfiles\/mapcontrols2.png/gi,”images/blank.gif”);
contents=contents.replace(/http:\/\/maps.gstatic.com\/intl\/en_ALL\/mapfiles\/poweredby.png/gi,”images/blank.gif”);
contents=contents.replace(/http:\/\/maps.gstatic.com\/intl\/en_ALL\/mapfiles\/mapcontrols3d5.png/gi,”images/blank.gif”);
contents=contents.replace(“Terms of Use”,”");
//—- it is tested using Mozilla Firefox version 3.6.11. Not working on IE version 6.*JUDUL UTAMA
Keterangan Peta Google
document.write(contents);
-
Fred,
AppendChild() didn’t work for me. It just displays blank page. when I debug thru the code I see objects being captured. Any idea why? -
This is all I have on page.
Directions
setTimeout(function () {
var contents = window.opener.document.getElementById(“map_canvas”).cloneNode(true);
//document.write(contents);
document.getElementById(“googlePrint”).appendChild(contents);
window.print();
}, 200); -
You made some very nice specifics there. I did a explore on the subject and discovered the majority of people will recognize having your blog.
-
What a good post. I really really like reading these varieties or content. I can?t wait to view what others need to say.
-
I mistyped this web page and thankfully I found it once more. presently am at my college I additional this to favorites in order that I can re-read it later regards
-
good article regarding, however! i really don’t strive to be so negative but i do think that the web site could look better if you had a little bit of black on it
No…, you don’t need to agree… this is only my simple thoughts and opinions. Thanks for a excellent post anyway! Sincerely, Resor -
It is a really great entry. I found your blog through msn although searching a similar subject material. I truly consumed upwards everything you were required to talk about. Maintain the great work!
-
lol, another site that wont display correctly in K-Melon, bugger
-
Hi.
Useful post. But polylines are missing . can you please provide any solution for this.
Thanks in Advance,
Anu Krishna. -
Hi ..
I found the solution for this.
There are so many JS files including in my page. From one of the javascript “lightwindow.js” which applying 0.7 opacity to the lightwindow overlay div.So i have changed the 0.7 to 0.0. Problem solved.
Now the map is printing fine.
Thanks for the response..
AnuKrishna
-
Hi there,
I find how to print the map with direction, please read about –
http://www.sweet-web-design.com/wordpress/?p=1100 see “Note (regarding Route Boxer)” -
Hey There. I discovered your weblog using msn. This is a very smartly written article. I will be sure to bookmark it and return to read extra of your helpful info. Thanks for the post. I will definitely comeback.
-
Print button for Google Map API I was suggested this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are wonderful! Thanks! your article about Print button for Google Map API Best Regards Agata Yoder
-
Hi,
I had done the same in my asp.net application.this works fine in IE 8 but in rest of the browser marker is not displaying.
Any idea what do we need to change ?Thanks
-
This specific have grown terrific ever again routines wherein can help you unwind that spinal cord along with sleep suitably without the practical experience related to stress inside the yet again.
Submit a Comment
Comments