comment utiliser l'impression multimédia, pour google maps

Question

J'ai cette vue webbrowser d'une page, avec une carte Google.

J'ai ajouté quelques @media style Imprimer

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

Lorsque j'utilise alors la page d'impression ou d'une vue d'impression puis-je obtenir ceci:

Comme vous peut voir la carte Google est OK dans la taille de la page, mais c'est trop grand/juste une petite partie de la vraie image. Comment puis-je résoudre ce problème, afin d'obtenir une image Google comme la vue du navigateur dans la vue d'impression?

Answer 1

Cela ne peut pas être fait en utilisant CSS.

Vous aurez besoin d'une page spéciale avec une carte de la taille de celle qui doit être imprimée, ou faites un zoom arrière sur la carte avant de l'imprimer (ceci peut être fait avec javascript).

Answer 2

J'ai également rencontré ce problème avec des cartes dynamiques pilotées par les données. J'ai cependant trouvé un moyen d'utiliser css pour rendre ce travail un peu plus fluide sans avoir à manipuler la carte en utilisant l'API ou une page de carte séparée.

J'ai donné à la carte un conteneur div avec une hauteur définie et défini son débordement css sur caché. J'ai ajouté une deuxième carte sous la première en utilisant la même configuration mais avec une dimension imprimable comme 700px de largeur par 500px de hauteur. Enfin, la feuille de style d'impression a simplement l'affichage: aucun pour la première carte révélant la deuxième carte cachée dans son conteneur.

Est-ce que c'est un hacky?
Peut-être, mais cela a fonctionné instantanément pour moi.