come utilizzare la stampa del supporto, per google maps

Question

Ho questa vista del browser di una pagina, con una mappa di Google.

allora ho aggiunto qualche @Media Stampa stile

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

Quando Ho quindi utilizzare la pagina di stampa o di stampa, allora ottengo questo:

Come si può vedere la mappa di Google è OK nella dimensione della pagina, ma è troppo grande/solo una piccola parte della vera immagine. Come posso risolvere questo problema, quindi ottengo un'immagine di Google come la visualizzazione del browser nella visualizzazione di stampa?

Answer 1

Questo non può essere fatto usando CSS.

Avrete bisogno di una pagina speciale con una mappa dimensionata come deve essere stampata, o rimpicciolire la mappa prima della stampa (questo può essere fatto usando javascript).

Answer 2

Mi sono anche imbattuto in questo problema con le mappe dinamiche basate sui dati. Ho comunque trovato un modo di usare css per rendere questo lavoro un po 'più fluido senza dover manipolare la mappa usando l'API o una pagina di mappa separata.

Ho dato alla mappa un contenitore div con un'altezza definita e impostato il suo css overflow su nascosto. Ho aggiunto una seconda mappa sotto la prima usando la stessa impostazione ma con una dimensione stampabile come 700px larghezza per 500px altezza.

Infine il foglio di stile di stampa è semplicemente visualizzato: nessuno per la prima mappa che rivela la seconda mappa nascosta nel suo contenitore.

È questo hacky?
Forse, ma ha funzionato all'istante per me.