cómo usar impresión de medios, para google maps

Question

Tengo esta vista de navegador web de una página, con un mapa de Google.

entonces he añadido un poco de impresión @media estilo

<style type="text/css"> 
     @media print 
     { 
     body{font-family:georgia,times,sans-serif;} 
     img{max-width:500px;} 
     #headerblock{display:none;} 
     #navigationblock{display:none;} 
     #thewaydiv{display:block;} 
     #footerblock{display:none;} 
     #contentmap{min-height:100px; position:relative; width:100%;} 
     #map{border-bottom:0px; border-left:0px; border-top:0px; border-right:0px; height:250px; margin-top:0px; width:100%;} 
     } 
    </style> 

Cuando luego usar la página de impresión o imprimir entonces me sale esto:

Como Puede ver que el mapa de Google está bien en el tamaño de la página, pero es demasiado grande/solo una pequeña parte de la imagen verdadera. ¿Cómo puedo solucionar esto, así que obtengo una imagen de Google como la Vista del navegador en la Vista de impresión?

Answer 1

Esto no puede hacerse usando CSS.

Necesitará una página especial con un mapa del tamaño que tiene que imprimirse, o alejar el mapa antes de imprimir (esto se puede hacer mediante javascript).

Answer 2

También encontré este problema con los mapas dinámicos de datos. Sin embargo, encontré una forma de utilizar css para hacer que esto funcione un poco más suave sin tener que manipular el mapa usando la API o una página de mapa separada torpe.

Di al mapa un contenedor div con una altura definida y establecí su desbordamiento css en oculto. Agregué un segundo mapa debajo del primero usando la misma configuración pero con una dimensión imprimible como 700px de ancho por 500px de alto.

Por último, la hoja de estilo de impresión simplemente tiene pantalla: ninguna para el primer mapa que revela el segundo mapa oculto en su contenedor.

¿Esto es hacky?
Tal vez, pero funcionó instantáneamente para mí.