I am having the similar problem with my maps. I have no trouble printing the map or markers, but the polygon shapes add extra lines, corners, etc. to the printout. An example of this problem can be seen by printing the simple polygon sample provided by Google http://code.google.com/apis/maps/documentation/javascript/examples/polygon-arrays.html. When this example is actually outputted to paper an extra corner is inserted in the lower corner of the triangle. While this is an example of just a small insertion, in other polygon shapes there can be long lines and extra corners etc. inserted.
The erroneous information only appears on the printed copy and is exactly the same no matter what printer or print driver I am using. In our system we only use FireFox, so I am not concerned how other browsers would have to deal with this problem, and we print in landscape mode with the "Print Background" switch set on. I am not a user of jQuery, could you translate your jQuery code into plain javaScript, so that I might test it out. Thanks in advance for any help. On Oct 13, 10:56 am, Garito <[email protected]> wrote: > Hi all! > There are a bunch of discussions on this group about people having > problems printing the maps > > When you try to print a map generated by the API, the images and the > markers don't render properly > > This is because how are the maps made > > The map quadrants and the markers are setted as a div with a > background image with the quadrant or the marker ( url(url-to-the- > quadrant-image-or-marker) ) > > If you want to print properly the generated map, you only need to read > the div's with a background image and replace it with a real HTML > image object > > Here is how to do that with jQuery (it's only a proof of concept, you > need to adapt it to your needs): > > $('#mapaAgrupat div').each(function(i, elem) { > var $elem = $(elem), background = $elem.css('background-image'); > if(background != 'none') { > background = background.replace('url("', ''); > background = background.replace('")', ''); > $elem.append('<img src="' + background + '" />'); > $elem.css('background-image', ''); > } > > }); > > Where #mapaAgrupat is the id of the map div (the same you pass to the > map object) > > At this stage of the test, I use firebug to run this code and works > fine for that purpose > > Then, the step by step process to reproduce what I'm saying: > > 1.- Launch firefox > 2.- Load your map > 3.- Open Firebug tab > 4.- Copy the code to the console > 5.- Change the id of the div mapaAgrupat to the id of the div that > contains your map > 6.- Print the map (if you use Mac OS X as me, you don't need to really > print, you could previsualize it to check it) > > Hope this solve your print problems -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
