Centro Google Maps (V3) en el explorador imprimir

Question

Tengo un mapa establecido en el 100% del ancho de la página. El mapa tiene un marcador y se centra en ese marcador. Cuando imprimo el navegador, quiero que el mapa se mantenga centrado en el marcador. Este es el código que he escrito para hacerlo:

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()); 
}); 

Esto funciona cuando me re-tamaño de mi navegador, pero no funciona cuando el propio navegador modifica el tamaño antes de imprimir. Si mi navegador está por encima de cierto ancho, el marcador se desplaza completamente fuera de la página (a la derecha) cuando se imprime el mapa.

Aquí es mi caso de prueba: http://www-sf.talispoint.com/testmapprint.html

Answer 1

Debería agregar una impresión @media y darle al mapa el tamaño al imprimir y luego puede hacer lo que se explica a continuación.

Cuando se imprime un mapa, lo que sucede es que la esquina superior izquierda se mantiene y el mapa se ajusta para ajustarse al tamaño de impresión @media.

Si desea que el centro siga siendo el mismo, debe cambiar manualmente el centro del mapa. http://jsbin.com/owiwox/33 es un ejemplo de cómo solucionar esto.

Se utiliza un detector para el material de impresión aplica evento y ajusta el centro del mapa usando una relación de cómo se cambia el mapa (de hecho más pequeño)

Una cosa que hay que cuidar es que puede que tenga que hacer este navegador dirigido a hacer que funcione en todos los navegadores (esta solución funciona bien en Chrome) Un buen recurso para hacer que funcione en todos los navegadores es: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

el js código de la muestra por encima de escucha imprime las solicitudes y cambia el mapa para que la esquina superior izquierda tenga el mismo centro que el mapa grande.

Para cortar toda la historia corta, así es como funciona

1. que necesita para poner en la proporción del mapa vs mapa impreso (o conseguir el tamaño marcando desde JS) Se asigna a: var widthRatio = 2; var heightRatio = 3;

2. usted escucha de los medios impresos están aplicando y cambiar el centro de modo que no cambia

3. Después de terminar la impresión, revierte el cambio.

Todavía aquí se tiene el problema de que se cortó una parte del mapa, pero no es una buena solución a este problema, ya que el nivel de zoom -1 baldosas no podrían ser cacheados por lo que cuando se aleja para ajustarse a los límites es posible que no obtengas fichas.

Answer 2

Parece que el problema con su 'impresión' o 'impresora'.

Hice una prueba:

1. carga el mapa de prueba y hacer que el navegador muy amplia

2. vista previa de impresión y vio el problema que usted describió

3. Pero: Me puede cambiar el Escala de impresión de 'Ajustar a la posición' (por defecto para IE y FF) para decir 30% y fue capaz de imprimir el mapa como se ve en la pantalla.

Otro pensamiento es:

Usted puede intentar utilizar otra CSS para la impresión de limitar el ancho mapa div, pero no estoy seguro de si que activará el cambio de tamaño del mapa primero (que puede referirse a esta publicación: Javascript Event Handler for Print)