How do I view Google Maps in print mode?

Question

I use the Google Maps API v2, and I would like to be able to print the map, just like Google, on my maps page.

You can click the small printer icon and create a new pop-up window with the same card, but all non-printable items (such as controls) will be deleted. I know that they use @media print to achieve this effect when you click "Preview" or "Print" in the navigator. However, the popup is not in print mode. A.

Is there a way to do the magic trick that they do, for example, set the current media type for "printing"? Or do they trick and customize their own CSS cheat style?

I have a Silverlight plugin and a Google map on the same page, and I want to create a popup containing only a map ready to print (e.g. Google).

Thanks http://abcoder.com/google/google-map-api/print-button-for-google-map-api/ I know how to get HTML content, but I can get content with all the controls, etc. . on it (which I do not want).

Any help would be appreciated.

Answer 1

Google maps put the gmnoprint class in all the elements they don’t want to print .. so setting this parameter to display:none in your print css file or pop-up will hide them.

 .gmnoprint{ display:none; } 

Of'course this will hide what Google considers erroneous. If you want to select other elements, you will have to parse their HTML code somehow :(

Answer 2

I had the same problem with custom map image overlay added via kml. Gabi heads-up on the gmnoprint class was the key. In my case, the div with the gmnoprint class applied was the direct parent of my img element, which disappeared. I basically created the "make overlay printable link" link:

  $("#printable-map").click(function() { if($(this).text() == "Include overlay when printing") { $(this).text("Exclude overlay when printing"); $("[src$=blah.png]").parent().removeClass("gmnoprint"); } else { $(this).text("Include overlay when printing"); $("[src$=blah.png]").parent().addClass("gmnoprint"); } }); 

Tested and works in Safari, FF and Chrome.

Answer 3

Another useful approach for printing Google maps is to use the Google Static Maps API . You can create a static image based on a range of display options (location, zoom level, size, markers, etc.) and include this image on the print preview page. A.