Thanks a ton for this fix Garito... It took me a bit of modifying to
adapt it to my needs. I wanted a fix that got rid of the grey boxes
for markers in IE. It looks like the problem was just the opacity
filter that they have on the marker <div>'s.
If you remove the filter then no more grey boxes! It also doesn't
appear to effect the visual display, so you can run this script even
when not printing. Hoping googlers see this and either give an
explanation for why the alpha(opacity=1) CSS, or remove it outright
then printing will work out of the box.
I also tried to run the code as part of the initalization of my page
so that you don't need to execute it manually. This is quite an ugly
hack using setTimeout() timers. But I couldn't find any events that
fired when all the markers were loaded. Basically the script below
will keep running every few seconds until the markers are fixed.
function init() { // run as part of the page initialization
pFcount = 0;
window.setTimeout("printFix()", 3000); // wait 3 seconds initially to
let markers load
}
function printFix() {
if (pFcount >= markers.length) return; // replace "markers" with the
array containing your markers
$('#mapDiv div').each(function(i, elem) { // replace "mapDiv" with
the div containing your map
var $elem = $(elem), background = $elem.css('background-image'),
filter = $elem.css('filter'), backgroundcolor = $elem.css('background-
color');
if (filter == 'alpha(opacity=1)' && background == 'none' &&
backgroundcolor != 'white') { // tries to find only the marker divs
$elem.css('filter', '') // turns off opacity filter
that causes
grey boxes in IE printing
}
});
window.setTimeout("printFix()", 1000);
}
I tested in IE8 and it looks great. IE6 and IE7 are still a little
screwy at times, but at least the markers show up!
On Oct 13, 8:56 am, Garito <gar...@gmail.com> 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 google-maps-js-api...@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
