Imprimer avec Internet Explorer 8

**abel.ludba** · 13/01/2012, 18h17

Salut
Je vouderais imprimer une carte avec IE 8.
Le résultat n'est pas du tout le même avec FireFox et Internet Explorer.
Pouvez-vous aider? Est-ce que qlq'un a une idée?
Voici mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Clinet side printer version</title>
<style type="text/css">
 
.style1 {color: #0033FF}
.style3 {
 font-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
}
#map_canvas
{
width: 700px; 
height: 600px;
}
 
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 
<script language="javascript">
function printMap()
{ 
  var contenue = document.getElementById('print_content').innerHTML; 
  var content_map=document.getElementById('map_canvas').innerHTML;
 
  var docprint=window.open('','' ); 
   docprint.document.open(); 
   docprint.document.write('<html><head><title>Imprimer Carte Texte</title>'); 
   docprint.document.write('</head><body onLoad="self.print()"><table>');   
     docprint.document.write('<tr> <td style="float:right;width:300px; height: 600px;"');
   docprint.document.write(content_map);
   docprint.document.write('</td><td>Legends ici</td></tr><tr><td>');   
   docprint.document.write(contenue);
    docprint.document.write('</td></tr>');
   docprint.document.write('</table></body></html>'); 
   docprint.document.close(); 
   docprint.focus(); 
 
 
}
</script>
<script type="text/javascript"> 
  var Rochelle = new google.maps.LatLng(45.69847032728747, -1.7514422416687);
  var Rochelle = new google.maps.LatLng(45.69847032728747, -1.7514422416687);
  var marker;
  var map;
 
  function initialize() {
    var mapOptions = {
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: Rochelle
    };
 
    map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
 
  }
 
 
</script>
</head> 
<body onload="initialize()">
<table >
  <tr>
    <td ><h2 align="center" class="style1">Cartes et Textes </h2></td>
  </tr>
  <tr> 
    <td >
    <div align="right"><a href="javascript:printMap()"> Imprime_CarteTexte</a>    </div>
    <div class="style3" id="print_content"> 
      <table >
        <tr>
          <td>print Map print Map print Map print Map print Map print Map print Map print 
print Map print Map print Map print Map print Map print Map print Map print Map print Map <br />
print Map print Map print Map print Map print Map print Map print Map print Map print Map 
print Map print Map print Map Print</td>
 
 
        </tr>
      </table>
   </td>
  </tr>
  <tr>
  <td>
<div id="map_canvas"    ></div>
  </td><td>
		  Legendes ici
		 </td>
  </tr>
   </div>
</table>
 
</body>
</html>

Merci
Abel

**NoSmoking** · 15/01/2012, 14h40

Bonjour,
il ne te faut pas copier le document.getElementById('map_canvas').innerHTML;, qui correspond au contenu de la DIV contenant ta map mais le contenu du parentNode de la DIV contenant ta map soit document.getElementById('map_canvas').parentNode.innerHTML;.

De plus il te faut également mettre dans ton document la partie STYLE de la DIV de ta map.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function printMap(){
  var contenue = document.getElementById('print_content').innerHTML;
  var content_map=document.getElementById('map_canvas').parentNode.innerHTML;
  var docprint=window.open('','' );
  var html = '<html><head><title>Imprimer Carte Texte<\/title>';
  html +=  '<style type="text/css">#map_canvas{width: 700px;height: 600px;}</style>';
  html +=  '<\/head><body _onload="self.print()"><table>';
  html +=  '<tr><td style="width:700px;height:600px;">';
  html +=  content_map;
  html +=  '<\/td>';
  html +=  '<td>Legends ici<\/td><\/tr><tr><td>';
  html +=  contenue;
  html +=  '<\/td><\/tr>';
  docprint.document.open();
  docprint.document.write( html);
  docprint.document.close();
  docprint.focus();
}

voila pour le principe qui devrait te permettre de récupérer d'un coup carte, texte et légende en prenant le innerHTML de l'élément conteneur commun à ces différents éléments.

**abel.ludba** · 16/01/2012, 15h10

Salut
Merci pour la réponse.
J'ai fait les corrections. il y a une petite amelioration. Mais, la carte ne s'affiche toujours pas dans Internet Explorer 8. Voici deux copies écrans: un avec IE8 et l'autre avec FireFox.
L'organisme pour lequel je travaille utilise exclusivement IE8.
Je ne comprends pas ce qui se passe.
Merci pour l'aide
Abel

**NoSmoking** · 16/01/2012, 22h18

reprends pour commencer la structure de ta page qui n'est pas conforme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table>
  <tr>
    <td>
      <h2>...</h2>
    </td>
  </tr>
  <tr>
    <td>
      <div align="right">
        <a>...</a>
      </div>
      <div> <!-- ICI OUVERTURE DE LA DIV -->
        <table>
          <tr>
            <td>...</td>
          </tr>
        </table>
      <!-- DIV DEVRAIT FERMER ICI -->
    </td>
  </tr>
  <tr>
    <td>
      <div id="map_canvas">
      </div>
    </td>
    <td></td>
  </tr>
  </div> <!-- ICI FERMETURE DE LA DIV -->
</table>

pas sûr que cela règle le problème, pas testé pour cause de non IE8.

**abel.ludba** · 18/01/2012, 01h19

Je l'ai essayé.. rien n'y fait.

**NoSmoking** · 18/01/2012, 10h02

devant la résistance de IE8 je te propose une autre approche, plus propre à mon sens.
But:
- Impression d'une carte.
Besoin :
- La carte uniquement, sans interactivité et barre d'outils.
Comment :
- Utilisation d'une image statique.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function printMap(){
  var sHtml ='';
  var sMap  ='';
  var oDoc  = window.open('','PRINT_MAP');
 
  // c'est ici que l'image est faite
  sMap+= 'http://maps.googleapis.com/maps/api/staticmap?';
  // récupération de la position centrale
  sMap+= 'center='+oMap.getCenter().lat() +',' +oMap.getCenter().lng();
  // ajout du zoom de la carte affichée
  sMap+= '&zoom=' +oMap.getZoom();
  // attention limité à 640x640 en mode free
  sMap+= '&size=' +oMap.getDiv().offsetWidth +'x' +oMap.getDiv().offsetHeight;
  // paramètre à ne pas oublier
  sMap+= '&sensor=false';
 
  sHtml += '<!doctype html><html><head><title>Imprimer Carte Texte<\/title>';
  sHtml += '<\/head><body onload="self.print()">';
  sHtml += '<img src="' +sMap +'">';
  sHtml += '<\/body><\/html>';
  oDoc.document.open();
  oDoc.document.write( sHtml);
  oDoc.document.close();
  oDoc.focus();
}

Plus d'info

http://code.google.com/intl/fr/apis/...on/staticmaps/

Il ne te reste plus qu'à ajouter les infos que tu souhaites.

Imprimer avec Internet Explorer 8 [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager