How to print a map properly

[Garito]

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

[Garito]

Hi!
In my case, I have a button for printing and I don't have this problem

What to do? Try to see if $(document).ready fires when the map finish to load. If not, you could use the tilesloaded or idle events to fire the patch

I don't investigate so much about that

Could you send an email to the list when you decide how to solve that? Perhaps will be useful for more people

Cheers

2010/10/27 pkh80 <phol...@gmail.com>

Garito -
Thanks for this fix! I think it has the potential to solve my
problems, but I am trying to implement it as part of my web page so it
works automatically.

I can't seem to get it to work outside of Firebug. If I have it
execute as part of my pages initialization, google maps hasn't
finished drawing yet. Do you know of an event that fires after google
maps is loaded and drawn?

Thanks!

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 toprintamapgenerated by the API, the images and the

> markers don't renderproperly
>
> This is because how are the maps made
>

> Themapquadrants 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 toprintproperlythe generatedmap, 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 themapdiv (the same you pass to themapobject)

>
> 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 yourmap
> 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 yourmap

> 6.-Printthemap(if you use Mac OS X as me, you don't need to reallyprint, you could previsualize it to check it)
>
> Hope this solve yourprintproblems

--
Mi twitter: http://twitter.com/garito

Temet nosce

[Garito]

Hi!
I prefer to discuss about that on the google groups threat: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/3b1c5e69bfe809ce/b6b2b82d591b0ee5?#b6b2b82d591b0ee5

Thanks!

2010/10/28 Garito <gar...@gmail.com>

[pkh80]

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:

[Garito]

Hi!
Thanks a lot for the IE fix

I'll try it the next wednesday (the day I could test this kind of
things)

I'll comment here if I discover a better way to solve something

I wonder too why this supposed smart people do the job in this way

Sometimes human is a weird animal!

[Claus]

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.

[Claus]

I have come across an even better example to illustrate my example

In firefox using this tool: http://www.birdtheme.org/useful/v3tool.html

Do the following:

1) enter this address into the search box "524 West Gartner Road,
Naperville, IL". Click search Observe a park name Gartner Park

2) zoom in on the map to zoom level 17 and adjust map so all park
boundaries are visible on the map

3) Change shape from Polyline to Polygon from the shape drop box

4) Change the KML output to JavaScript

5) Mark the outline of the park with these four coordinates
new google.maps.LatLng(41.750786,-88.152257),
new google.maps.LatLng(41.748241,-88.157664),
new google.maps.LatLng(41.747969,-88.157739),
new google.maps.LatLng(41.748089,-88.152353)

6) On the browser's File | Page Setup select Landscape mode

7) Print screen shown (no need even to print background image)

On Nov 1, 7:48 am, Claus <claus.myg...@gmail.com> wrote:
> 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 Googlehttp://code.google.com/apis/maps/documentation/javascript/examples/po....

[Garito]

Hi!
I try to find the correct map event to run the print fix without
success

The maps API v3 is a totally mess not ready for production

I wonder with googler's job not serious at all

The more close I'm here is with the tilesloaded

As this is a lateral issue. I think it's better for us if I open
another thread to ask for that

[mIDO]

Same here. Google has deprecated the v2 API while the v3 has a lot
problems. I think it is not ready for production too.
PLEAAAASE GOOGLE, Fix it!!!! :(

[Garito]

I ask if they work or not with it

A person called Larry said yes, they are working on

2010/11/4 mIDO <mid...@gmail.com>

--
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-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Arlo]

I implemented a class that used the static map API. So when you press
print, i hide the map and render an image of my existing map in the
same place. Works well.

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .

[Claus]

Can you show us some code on how to do this?

[Claus]

Is this the link you used http://code.google.com/apis/maps/documentation/staticmaps/
for the static maps "Static Maps API V2 Developer Guide"?

[Garito]

Yes, Arlo, for some cases is a solution

but

if your map has a lot of information this way just don't work because
static api has limitations in the number of bytes you ask for (see the
library limits)