Impression calamiteuse d'une Google Map

[FixSan]

Bonjour,

Sur cette page de mon projet actuel se trouve une Google Map. Il s'agit d'une carte statique, remplacée par une carte dynamique via javascript.

Un "aperçu avant impression" sous quelque navigateur que ce soit donne des résultats catastrophiques : au mieux (sous Firefox 4 et IE 7) la Google Map est ignorée, au pire elle est coupée (IE 6) ou même éparpillée sur plusieurs pages (IE 8).

Je ne vois pourtant pas de différence entre le code que j'ai utilisé, et le code trouvé sous de nombreux sites pour lesquels l'impression est correcte...

Une idée de ce qui cloche ? Merci d'avance pour votre aide, et bon week-end à tous !

[FixSan]

Dans la mesure où il s'agit d'une image statique remplacée par une image dynamique en js, le mieux serait de ne pas remplacer l'image statique si la page est destinée à l'impression, non ?
Autrement dit : y a-t-il, le cas échéant, un moyen de faire en sorte que le js ne s'applique pas si la page est destinée à l'impression ?

[Bovino]

Envoyé par FixSan

y a-t-il, le cas échéant, un moyen de faire en sorte que le js ne s'applique pas si la page est destinée à l'impression ?

Cette phrase n'a pas de sens

Lorsque le visiteur décide d'imprimer une page, c'est ce qui est affiché à l'écran qui est imprimé, il s'agit donc à la base d'une page destinée au screen.
De plus, c'est l'état actuel de la page qui est envoyé à l'interface d'impression de l'OS.
Ceci dit, il est malgré tout possible de spécifier des styles spécifiques pour l'impression (avec l'attibut media de la balise <style> ou <link>), mais en tout état de cause, tu ne pourras imprimer (ou non) que ce qui est présent dans le code HTML au moment de lancer l'impression.

[FixSan]

Ce que je voulais dire, c'est : comment faire pour imprimer la carte statique plutôt que celle générée par le js (éventuellement... dans le js !)

Tout cela ne résout pas mon problème Tout ce que j'ai pu trouver via Google (pour "problème d'impression Google map") diffère beaucoup des difficultés que je rencontre. Une idée ?

Merci d'avance pour votre aide, et bonne soirée à tous !

[FixSan]

Mmmm... J'aurais vraiment besoin d'un coup de pouce. Je ne m'en sors pas.

Après de nombreux tests, il semble qu'il y ait un mieux sous pas mal de navigateurs en indiquant directement dans le code la hauteur et la largeur de l'image. Mais sous IE8, l'impression reste catastrophique : la Google Map est "répartie" sur plusieurs pages, de même que l'info bulle de localisation...

Voici le code généré pour la Google Map :

Code :

1
2
3
4
5
6
7
8
9
<div class="conteneur"><div class="post">
	<a name="venir"></a><h3 class="widget-title">Comment venir&nbsp;?</h3>
	<div class="left"><ul><li>bla bla bla... </li></ul></div>
	<div class="right">
		<ul><li><strong>Plan d'accès&nbsp;:</strong><br>
			<div id="bord-map"><div id="map" style="width: 350px; height: 275px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"><div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;"><div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1; cursor: url("http://maps.gstatic.com/intl/fr_ALL/mapfiles/openhand_8_8.cur"), default; -moz-transform: translate(0px, 0px) scale(1);"><div style="z-index: 100; position: absolute; left: 0px; top: 0px;"><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><div style="width: 256px; height: 256px; position: absolute; left: 36px; top: 58px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -220px; top: 58px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 36px; top: -198px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 36px; top: 314px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 292px; top: 58px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -220px; top: -198px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -220px; top: 314px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 292px; top: -198px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 292px; top: 314px;"></div></div></div></div><div style="z-index: 101; position: absolute; left: 0px; top: 0px;"></div><div style="z-index: 102; position: absolute; left: 0px; top: 0px;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 36px; top: 58px;"><canvas width="256" height="256" style="position: absolute; left: 0px; top: 0px;"></canvas></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -220px; top: 58px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 36px; top: -198px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 36px; top: 314px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 292px; top: 58px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -220px; top: -198px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -220px; top: 314px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 292px; top: -198px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 292px; top: 314px;"></div></div></div></div><div style="z-index: 103; position: absolute; left: 0px; top: 0px;"><div style="position: absolute; left: 0px; top: 0px; z-index: -1;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 36px; top: 58px;"><canvas width="256" height="256" style="position: absolute; left: 0px; top: 0px;"></canvas></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -220px; top: 58px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 36px; top: -198px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 36px; top: 314px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 292px; top: 58px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -220px; top: -198px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -220px; top: 314px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 292px; top: -198px;"></div><div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 292px; top: 314px;"></div></div></div></div><div style="z-index: 104; position: absolute; left: 0px; top: 0px;"></div><div style="z-index: 105; position: absolute; left: 0px; top: 0px;"></div><div style="z-index: 106; position: absolute; left: 0px; top: 0px;"></div><div style="position: absolute; z-index: 0; left: 0px; top: 0px;"><div style="overflow: hidden; width: 350px; height: 275px;"><img src="http://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&amp;1i4271324&amp;2i2831558&amp;2e1&amp;3u15&amp;4m2&amp;1u350&amp;2u275&amp;5m3&amp;1e0&amp;2b1&amp;5sfr&amp;token=122510" style="width: 350px; height: 275px;"></div></div><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><div style="width: 256px; height: 256px; position: absolute; left: 36px; top: 58px;"><img src="http://mt1.googleapis.com/vt?lyrs=m@152&amp;src=apiv3&amp;hl=fr&amp;x=16685&amp;apistyle=s.t:33%7Cp.v:off&amp;s=&amp;y=11061&amp;z=15&amp;s=Gali" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -220px; top: 58px;"><img src="http://mt0.googleapis.com/vt?lyrs=m@152&amp;src=apiv3&amp;hl=fr&amp;x=16684&amp;apistyle=s.t:33%7Cp.v:off&amp;s=&amp;y=11061&amp;z=15&amp;s=G" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 36px; top: -198px;"><img src="http://mt1.googleapis.com/vt?lyrs=m@152&amp;src=apiv3&amp;hl=fr&amp;x=16685&amp;apistyle=s.t:33%7Cp.v:off&amp;s=&amp;y=11060&amp;z=15&amp;s=Gal" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 36px; top: 314px;"><img src="http://mt1.googleapis.com/vt?lyrs=m@152&amp;src=apiv3&amp;hl=fr&amp;x=16685&amp;apistyle=s.t:33%7Cp.v:off&amp;s=&amp;y=11062&amp;z=15&amp;s=Galil" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 292px; top: 58px;"><img src="http://mt0.googleapis.com/vt?lyrs=m@152&amp;src=apiv3&amp;hl=fr&amp;x=16686&amp;apistyle=s.t:33%7Cp.v:off&amp;s=&amp;y=11061&amp;z=15&amp;s=Galileo" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -220px; top: -198px;"><img src="http://mt0.googleapis.com/vt?lyrs=m@152&amp;src=apiv3&amp;hl=fr&amp;x=16684&amp;apistyle=s.t:33%7Cp.v:off&amp;s=&amp;y=11060&amp;z=15&amp;s=" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: -220px; top: 314px;"><img src="http://mt0.googleapis.com/vt?lyrs=m@152&amp;src=apiv3&amp;hl=fr&amp;x=16684&amp;apistyle=s.t:33%7Cp.v:off&amp;s=&amp;y=11062&amp;z=15&amp;s=Ga" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 292px; top: -198px;"><img src="http://mt0.googleapis.com/vt?lyrs=m@152&amp;src=apiv3&amp;hl=fr&amp;x=16686&amp;apistyle=s.t:33%7Cp.v:off&amp;s=&amp;y=11060&amp;z=15&amp;s=Galile" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="width: 256px; height: 256px; position: absolute; left: 292px; top: 314px;"><img src="http://mt0.googleapis.com/vt?lyrs=m@152&amp;src=apiv3&amp;hl=fr&amp;x=16686&amp;apistyle=s.t:33%7Cp.v:off&amp;s=&amp;y=11062&amp;z=15&amp;s=" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div></div></div></div></div><div style="margin: 2px 5px 2px 2px; z-index: 12; position: absolute; left: 0px; bottom: 0px;"><a href="http://maps.google.com/maps?ll=50.364326,3.312829&amp;z=15&amp;t=m" target="_blank" title="Cliquez ici pour afficher cette zone sur Google&nbsp;Maps" style="position: static; overflow: visible; float: none; display: inline;"><div style="width: 62px; height: 24px; cursor: pointer;"><img src="http://maps.gstatic.com/intl/fr_ALL/mapfiles/google_white.png" style="position: absolute; left: 0px; top: 0px; width: 62px; height: 24px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div></a></div><div style="z-index: 1000; position: absolute; right: 0px; bottom: 0px;"><div style="position: static; overflow: visible; float: none; color: black; font-family: Arial,sans-serif; -moz-user-select: none; display: block; font-size: 11px; white-space: nowrap; text-align: right; padding: 2px; direction: ltr;"><span style="text-decoration: underline; cursor: pointer; color: rgb(119, 119, 204);">Données cartographiques</span><span style="color: rgb(0, 0, 0); display: none;">Données cartographiques ©2011 Tele Atlas</span><span style="color: rgb(0, 0, 0);"> - </span><a style="color: rgb(119, 119, 204);" target="_blank" href="http://www.google.com/intl/fr_US/help/terms_maps.html">Conditions d'utilisation</a></div></div><div style="position: absolute; font-family: Arial,sans-serif; z-index: 1000; overflow: visible; display: none; -moz-user-select: none; cursor: default; width: 300px; height: 180px;"><img src="http://maps.gstatic.com/intl/fr_ALL/mapfiles/iphone-dialog-bg.png" style="width: 300px; height: 180px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; position: relative; opacity: 0.9;"><div style="font-weight: bold; color: white; text-align: center; padding: 5px; position: absolute; left: 0px; top: 0px; font-size: 16px; width: 290px;">Données cartographiques</div><div style="position: absolute; font-family: inherit; bottom: 15px; cursor: pointer; background-color: transparent; border: 0pt none; padding: 0pt; margin: 0pt; font-size: 14px; left: 90px; width: 120px; height: 40px;"><img src="http://maps.gstatic.com/intl/fr_ALL/mapfiles/iphone-dialog-button.png" style="position: absolute; left: 0px; top: 0px; width: 120px; height: 40px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"><span style="color: white; text-align: center; width: 100%; height: 100%; background-color: transparent; position: absolute; left: 0px; top: 0px; padding-top: 10px;">Fermer</span></div><div style="color: white; text-align: center; font-size: 14px; position: absolute; left: 25px; top: 45px; width: 250px;">Données cartographiques ©2011 Tele Atlas</div></div><div controlheight="47" controlwidth="19" style="z-index: 10; margin: 5px; -moz-user-select: none; position: absolute; left: 0px; top: 0px;" class="gmnoprint"><div style="display: none; position: absolute;" controlheight="0" controlwidth="0" class="gmnoprint"><img title="Faire pivoter la carte à 90°" style="-moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; cursor: pointer; width: 20px; height: 20px;" src="http://maps.gstatic.com/intl/fr_ALL/mapfiles/rotate.png"></div><div style="position: absolute; left: 0px; top: 5px;" controlheight="42" controlwidth="19" class="gmnoprint"><img src="http://maps.gstatic.com/intl/fr_ALL/mapfiles/szc3d.png" style="width: 19px; height: 42px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"><div title="Zoom avant" style="position: absolute; left: 0px; top: 0px; width: 19px; height: 21px; cursor: pointer;"></div><div title="Zoom arrière" style="position: absolute; left: 0px; top: 21px; width: 19px; height: 21px; cursor: pointer;"></div></div></div><div style="margin: 5px; z-index: 11; position: absolute; cursor: pointer; right: 0px; top: 0px;" class="gmnoprint"><div style="float: left;"><div title="Afficher un plan de ville" style="direction: ltr; overflow: hidden; text-align: center; color: white; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background: -moz-linear-gradient(center top , rgb(109, 138, 204), rgb(123, 152, 217)) repeat scroll 0% 0% transparent; line-height: 160%; padding: 0pt 6px; border-radius: 2px 0pt 0pt 2px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border: 1px solid rgb(103, 138, 199); font-weight: bold; min-width: 27px;">Plan</div><div style="background-color: white; z-index: -1; padding-top: 1px; border-width: 0pt 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(169, 187, 223) rgb(169, 187, 223); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-image: none; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); position: absolute; left: 0px; top: 21px; text-align: left; display: none;"><div title="Afficher le relief sur la carte" style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: rgb(255, 255, 255); line-height: 160%; padding: 0pt 8px 0pt 6px; direction: ltr; text-align: left; white-space: nowrap;"><input style="vertical-align: middle;" type="checkbox"><label style="vertical-align: middle; cursor: pointer;">Relief</label></div></div></div><div style="float: left;"><div title="Afficher les images satellite" style="direction: ltr; overflow: hidden; text-align: center; color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background: -moz-linear-gradient(center top , rgb(254, 254, 254), rgb(243, 243, 243)) repeat scroll 0% 0% transparent; line-height: 160%; padding: 0pt 6px; border-radius: 0pt 2px 2px 0pt; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border-top: 1px solid rgb(169, 187, 223); border-right: 1px solid rgb(169, 187, 223); border-bottom: 1px solid rgb(169, 187, 223); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-image: none; font-weight: normal; min-width: 47px;">Satellite</div><div style="background-color: white; z-index: -1; padding-top: 1px; border-width: 0pt 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(169, 187, 223) rgb(169, 187, 223); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-image: none; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); position: absolute; right: 0px; top: 21px; text-align: left; display: none;"><div title="Pour afficher la vue à 45°, effectuez un zoom avant." style="color: gray; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: rgb(255, 255, 255); line-height: 160%; padding: 0pt 8px 0pt 6px; direction: ltr; text-align: left; white-space: nowrap; display: none;"><input disabled="disabled" style="vertical-align: middle;" type="checkbox"><label style="vertical-align: middle; cursor: pointer;">45°</label></div><div title="Afficher les images satellite avec le nom des rues" style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: rgb(255, 255, 255); line-height: 160%; padding: 0pt 8px 0pt 6px; direction: ltr; text-align: left; white-space: nowrap;"><input style="vertical-align: middle;" type="checkbox"><label style="vertical-align: middle; cursor: pointer;">Légendes</label></div></div></div></div></div></div></div>
		</li></ul>
	</div>
</div></div>