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.
My Elance Profile
Recent Comments