Center Google Maps (V3) on browser print

Question

I have a map set to 100% of the page width. The map has one marker and is centered on that marker. When I print the browser, I want the map to stay centered on the marker. This is the code I wrote to do so:

var lastPos = map.getCenter();
google.maps.event.addListener(map, "idle", function() {
  lastPos = map.getCenter();
  console.log(lastPos.toString());
});      

google.maps.event.addDomListener(window, "resize", function() {
  google.maps.event.trigger(map, "resize"); 
  map.setCenter(lastPos);
  console.log("Re-center on " + lastPos.toString());
});

This works when I re-size my browser, but does not work when the browser re-sizes itself before printing. If my browser is above a certain width then the marker is shifted entirely off the page (to the right) when the map is printed.

Here is my test case: http://www-sf.talispoint.com/testmapprint.html

Answer 1

You would need to add a @media print and give the map the size when printing and then you can do what is explained below.

When a map is printed what happens is that the top left corner is kept and the map is adjusted to fit the @media print size.

If you want the center to stay the same you need to manually change the center of the map. http://jsbin.com/owiwox/33 is an example on how to work around this.

It uses a listener for the print media being applied event and adjusts the center of the map using a ratio on how the map is changed (made smaller)

One thing that you have to take care of is that you might have to make this browser targeted to make it work on all browsers (This solution works well in Chrome) A good resource for making it work across browsers is: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

The js code from the sample above listens to print requests and shifts the map so that the top left corner has the same center as the big map.

To cut the whole story short, this is how it works

1. You need to put in the ratio of the map vs printed map (or get the size by checking it from JS) You assign it to: var widthRatio = 2; var heightRatio = 3;

2. You listen for print media being applied and shift the center so that it does not change

3. After you finish print , you revert the change.

Still here you have the problem that a part of the map will be cut, but there is not a good solution here, since the zoom level -1 tiles might not be cached so when you zoom out to fit bounds you might get no tiles.

Answer 2

It seems the problem with your 'printing' or 'printer'.

I did a test:

1. load the test map and make the browser very wide

2. print preview and saw the problem you described

3. But: I can change the printing scale from 'Shrint to fit' (default for IE and FF) to say 30% and was able to print the map as seen on the screen.

Another thought is:

You may try to use another CSS for print to limit the map div width, but I am not sure if that will trigger the resize of the map first (you may refer to this post: Javascript Event Handler for Print)